Using Progressive Enhancement to Convert a Select Box Into an Accessible jQuery UI Slider

Posted by Scott on 08/11/2008

Topics:

Note: This script is built for an old version of jQuery UI (v1.5.3). We've created a new article with some major improvements to this technique. To read the article and download the script, visit Update: jQuery UI Slider from a Select Element - now with ARIA Support. To read about the original logic behind this approach, please continue reading here.

Earlier this year, we wrote about progressively enhancing select elements into slider components. Our article focused mainly on the high-level approach, but our demo code made use of the now abandoned "Interface" library, so we didn't release the code at that time. We've since rewritten our code utilizing jQuery UI's slider component, extending it with additional accessibility and general usability enhancements, and are now making it available for download.

Some features of note

Our version of the plugin not only generates a jQuery slider component, but also extends its functionality and accessibility in many ways:

  • Usability Enhancements: Using a select element as a guide, we created he plugin to automatically build in usability features like adding scale labels with tic marks, and grouping the scale into regions if there are optgroups in the select markup.
  • ARIA Accessibility Features: Our plugin adds ARIA attributes to the slider to keep users with assistive devices notified of the state. Fortunately, jQuery UI's slider already has great keyboard support as well, to complement the ARIA enhancements. However, since ARIA support is not implemented yet on a large scale, we recommend leaving the select element on the page, hidden from visual users, as a fallback. In order to keep it usable to screen readers while hidden to visual users, we recommend hiding the select elements by positioning them off the screen (instead of using display: none).
  • Developer Conveniences: When using this plugin, the select element and the slider generated from it act as a proxy to one another, meaning as you change the value of one of them, the other will update to match. This includes the initial position of the slider handle(s), which is determined by the selected index of the select element(s) used to create it. To change the initial position of the handles, just move the selected="selected" attribute to the option element you prefer. Since the select menu stays in sync with your slider, the slider can be used in its place, and the select menu can still be present in the DOM to store the value for form submission.
  • ThemeRoller-Ready: Since we're using a standard jQuery UI component, we structured the plugin to use ThemeRoller to style its appearance. This makes it extremely easy to customize the look of the component to your application's design. ThemeRoller-Ready

Basic usage - a simple 1-value slider

Using this plugin is fairly straight-forward. For starters, you'll need a select element on your page, which allows for a functional equivalent to the slider for users without Javascript support.


<label for="speed">Select a Speed:</label>
<select name="speed" id="speed">
  <option value="Slower">Slower</option>
  <option value="Slow">Slow</option>
  <option value="Med" selected="selected">Med</option>
  <option value="Fast">Fast</option>
  <option value="Faster">Faster</option>
</select>

Along with the select markup, you'll need to attach the JQuery library, the necessary jQuery UI slider dependencies, and our plugin script, accessibleUISlider.jQuery.js.

With those files included, you can now generate a slider component from your select menu using the following Javascript:


$('select#speed').accessibleUISlider();

Demo Page

Range sliders from multiple selects

To generate a range slider with 2 handles, create two select elements with identical options:


<label for="valueA">From:</label>
<select name="valueA" id="valueA">
	<option value="6am">6:00</option>
	<option value="7am">7:00</option>
	<option value="8am">8:00</option>
	<option value="9am" selected="selected">9:00</option>
	<option value="10am">10:00</option>
	<option value="11am">11:00</option>
	<option value="Noon">Noon</option>
	<option value="1pm">1:00</option>
	<option value="2pm">2:00</option>
	<option value="3pm">3:00</option>
	<option value="4pm">4:00</option>
	<option value="5pm">5:00</option>
	<option value="6pm">6:00</option>
	<option value="7pm">7:00</option>
	<option value="8pm">8:00</option>
	<option value="9pm">9:00</option>
	<option value="10pm">10:00</option>
	<option value="11pm">11:00</option>
	<option value="12pm">12:00</option>
</select>

<label for="valueB">To:</label>
<select name="valueB" id="valueB">
	<option value="6am">6:00</option>
	<option value="7am">7:00</option>
	<option value="8am">8:00</option>
	<option value="9am" selected="selected">9:00</option>
	<option value="10am">10:00</option>
	<option value="11am">11:00</option>
	<option value="Noon">Noon</option>
	<option value="1pm">1:00</option>
	<option value="2pm">2:00</option>
	<option value="3pm">3:00</option>
	<option value="4pm">4:00</option>
	<option value="5pm">5:00</option>
	<option value="6pm">6:00</option>
	<option value="7pm">7:00</option>
	<option value="8pm">8:00</option>
	<option value="9pm">9:00</option>
	<option value="10pm">10:00</option>
	<option value="11pm">11:00</option>
	<option value="12pm">12:00</option>
</select>

and call accessibleUISlider() on them:


$('select#valueA, select#valueB').accessibleUISlider();

Demo Page

The plugin will automatically detect that two select menus are provided and create a range slider, injecting it after the second select element. The handles in the range slider will still update their respective select element values, just as they do in a single handle slider.

Adding Grouped Labels

To create a slider with grouped regions of labels, you'll need to create your select menu with optgroup elements wrapping groups of related options. Be sure to use the "label" attribute to specify a label for the region, and the script will automatically create groups using definition lists.

This markup displays the previous select menu markup with optgroups added.


<select name="valueA" id="valueA">
	<optgroup label="Morning">
		<option value="6am">6:00</option>
		<option value="7am">7:00</option>
		<option value="8am">8:00</option>
		<option value="9am" selected="selected">9:00</option>
		<option value="10am">10:00</option>
		<option value="11am">11:00</option>
		<option value="Noon">Noon</option>
	</optgroup>
	<optgroup label="Afternoon">
		<option value="1pm">1:00</option>
		<option value="2pm">2:00</option>
		<option value="3pm">3:00</option>
		<option value="4pm">4:00</option>
		<option value="5pm">5:00</option>
	</optgroup>
	<optgroup label="Evening">
		<option value="6pm">6:00</option>
		<option value="7pm">7:00</option>
		<option value="8pm">8:00</option>
		<option value="9pm">9:00</option>
		<option value="10pm">10:00</option>
		<option value="11pm">11:00</option>
		<option value="12pm">12:00</option>
	</optgroup>
</select>

The javascript call for grouped labels remains the same.

Demo Page

Another demo with lots of optgroups and options:

Demo Page

Configuring the Slider with native jQuery Options

Our plugin allows you to pass in the native jQuery UI slider options to configure the slider to your needs. Keep in mind though, that while all of the slider options are available, some of them are auto-generated by our plugin based on the conditions in your select menu(s). The options currently used by our plugin are width, range, steps, stepping, handles, and slide.

To take advantage of one of these options, such as slide, without overriding the functionality generated by our plugin, you'll need to bind the event separately to the generated slider like this:


$('select#valueA').accessibleUISlider();
//add non-conflicting slide event
$('select#valueA').next().bind('slide', 
  function(e, ui){
    //do something here on slide!
  }
);

The width option is one you'll likely want to override completely, as it defaults to the width of the select's parent element. To override it, simply pass it in as you would to the slider plugin: $('select').accessibleUISlider( {width: 400} );

Added custom display features

Our plugin allows additional options for the number of labels you'd like to display, the opacity of the range element (if applicable), and an option to prevent the slider from automatically appending to the page so you can do it yourself elsewhere or later on.

Changing the number of labels displayed

By default, our plugin will display 3 labels under your slider, starting with the extremes, then the middle, and so on. To change the number of labels displayed, simply pass in a different labels option:


$('select').accessibleUISlider({ labels: 25 });

Setting the slider range opacity

Our plugin adds a slight opacity shift in the slider range to allow the scale to show through the range fill. The default is 0.7, but you can override it by passing a rangeOpacity option from 0.0-1.0.


$('select').accessibleUISlider({ rangeOpacity: 0.5 });

Preventing automatic slider injection

If you would rather generate a slider and inject it on your own, just pass in inject: false as an option when you call the function. This will tell the plugin to return the slider API instead of just creating the slider and returning your original selection in typical jQuery plugin style. The returned object will be the options you'll pass into your slider, including the markup, which is stored in the markup attribute. You can then inject that markup by calling the "slider" method on it, like this:


var mySlider = $('select').accessibleUISlider({ inject: false });
mySlider.markup.appendTo("body").slider();

Just as before, you can pass or bind any native UI slider options to the slider method above.

Styling with ThemeRoller

Since this component builds upon the existing jQuery UI slider component, you can style it by including a ThemeRoller-generated stylesheet, but you'll also need to grab some additional styles for the parts we've added. Those styles are located here: jquery-ui-slider-additions.css

Road Map for this Plugin

In the near future, we plan to work with the jQuery UI team to fully integrate this functionality into the native jQuery UI slider component. This will allow you to simply call slider() on a select element to generate a slider from its markup. We also intend to implement additional starting points, such as text and radio inputs, to support various scenarios where a slider can be used as an enhancement.

Download This Code

Version 1.0: Filament_Group_accessibleUISlider.zip (5kb Zip)

Your thoughts?

We'd love to hear what you think of this plugin and any suggestions you have for how it could be improved. Please use our form below.

Book cover: Designing with Progressive Enhancement

Enjoy our blog? You'll love our book.

For info and ordering: Visit the book site

Comments

Great demo. Looking forward to using this in something soon for date ranges (class schedule times).

Comment by Scott Fitchet on 08/12  at  11:43 PM

It is great that you released this one for download!  The labels and stepping tick marks are essential - I will be using this.

Comment by Marc Grabanski on 08/13  at  12:21 AM

Wow, this is most likely the most inventive piece of Javascript I’ve seen lately! Really, great work!

Comment by Bramus! on 08/13  at  12:24 AM

This is an amazing piece of work. As Marc said, thank you for sharing this. Great example of PE and a beautiful result. You continue to add value to a really great library, and everyone benefits!

Comment by Richard D. Worth on 08/13  at  12:28 PM

This is really quite special, great work and thanks for sharing!

Comment by Joel Gascoigne on 08/13  at  05:42 PM

Just tested them. For some reason my handles overlap. any ideaS?

Comment by Paul on 08/19  at  12:19 AM

Thank you for sharing. Your examples are indeed useful.
I downloaded your demo. It works.

But I have one question. How could I list all values under the slider?
Which file has to be modified?

Thanks,

Olga

Comment by Olga on 08/19  at  04:09 PM

really nice work.

is there anyway to remove the select boxes and show only the slider?

Comment by tom on 08/19  at  04:52 PM

@Olga: you can use the labels option. Set that equal to however many options in your select box.

@tom: In the article, it states the best way is to give them an absolute position. Set it the top and left to a large, negative number (-99999px or something).

Im having a lot of trouble getting the sliders to not overlap…

Comment by Paul on 08/20  at  08:48 AM

@Paul: Could you explain what you mean by overlap? Is this a problem with the jQuery UI slider component or specific to our extension?
Thanks for answering Olga and Tom. I’ll add to your answers a little:

@Olga: To get the number Paul specified dynamically, you could do something like this:
$(’select’).accessibleUISlider({ labels: $(’select option’).size() });
of course, you’ll want to replace ‘select’ with a jQuery selector that will only contain a single select element (using its ID, for instance).

@tom: Since our plugin returns your original selection, you could just as easily hide the select like this:
$(’select’).accessibleUISlider().hide();
But we advise to hide it using CSS positioning instead, since the “hide” method toggles its display, which will make it inaccessible to users who might need it. You could do this by adding a class and positioning selects with that class name.

Comment by Scott (Filament) on 08/21  at  10:18 PM

@Scott: By overlap, i mean, the slider handles go over each other. I worked around it though playing around with margins and widths.

One suggestion I have to this plugin, would be the ability to work around disabled options in a select box. One issue I was having was that I needed to disable a few options based on the user’s input, but when I was disabling them, the slider wouldnt recognize them as disabled. I might have had to rebuild the sliders, but I think that would be heavy on the browser.

Also another thing I noticed was that when I would add the “slide” option to the accessibleUISlider - it would kill the slide option in the plugin that controls the sliders. If that could be worked around, that would be awesome.

Comment by Paul on 08/21  at  10:30 PM

I’ve tried it and it works great. I saw a problem when using IE6, when clicking on the handles the width and height are increasing a lot and it looks a bit ugly. I’ve tried some modifications but I didn’t find a solution for this. Anyone has an idea about how to make it to display ok also in IE6?

Comment by xzvs on 08/28  at  03:59 PM

@Paul: We’ll look into the overlap and see if it’s something we can fix for the jQuery UI Slider’s CSS in ThemeRoller, since that’s where that part of the code would reside. Your idea for disabled options is pretty interesting, and one we hadn’t considered. We’ll give it some thought. As for the slide option, did you try adding it through “bind”? I think that’ll prevent overriding the portions that our plugin auto-generates. Refer to the code in the section “Configuring the Slider with native jQuery Option” above. Let us know if that works for you.

@xzvs: The IE 6 issue looks to be one in the UI slider’s CSS generated from ThemeRoller. We’ll look into it ASAP. Thanks.

Comment by Scott (Filament) on 08/28  at  04:29 PM

Thanks a lot guys this looks great.

Just a quick one, is there anyway that we don’t display the drop down menus? so only the slider exists?

Comment by Hossein on 09/01  at  09:33 AM

@Hossein: did you read Scott’s answer to Tom above?

@Scott: I fixed the overlap issue, playing with padding and margin. It works easier in the original jquery ui sliders though.

Comment by Paul on 09/01  at  09:39 AM

This is a great plugin. Not only what it does but how it does is very smart.

Congrats.

Comment by Umut Muhaddisoglu on 09/05  at  09:24 PM

I am having issues with multiple sliders (more than two) and them overlapping each other as well.  I don’t understand how two don’t overlap, but three or more do.  Also if you could help me understand how to allow them to meet but not overlap, that would be great.

Said another way I would like to have three or more sliders than can be the same value, but never overlap.  IE: breakfast, lunch, and dinner can be at the same time (all one meal) but breakfast could never come after lunch, lunch after dinner, or breakfast after dinner.

Comment by Tim on 09/12  at  05:08 AM

Its an outstanding plugin for JQuery and it has worked flawlessly with my little project so far. However, I wanted to know how to implement change, start or stop functions for the slider instead of just the slide function. I want to get values from the slider each time it is dragged, the slide function can work but it makes too many calls which are probably not that practical for my requirement since it picks the values from a database. A start or a stop function could work more smoothly. Could you please help?

Comment by Umar Jadoon on 09/17  at  11:40 PM

how do I get a handle for the slider later, though?

for example, I want to write a reset search button, which moves the slider handles back to the initial positions

naively, I thought that since I created the slider with

$(’select#startPrice, select#endPrice’).accessibleUISlider({width:400});

that the onClick for the reset button could do something like:

$(’select#$startPrice, select#endPrice’).slider(’moveTo’, ‘75000’, 1);

(actually, the ‘75000’ comes from a variable, but I know it to be a valid option from other code elsewhere)

however, this does nothing - apparently because it isn’t really referencing the same component anymore.

Comment by silver Harloe on 09/23  at  04:03 AM

@Tim: We only intended this to support one or two handles and I’m not entirely sure if jQuery UI’s plugin is built to handle more than 2 either. We’ll have to check on that and get back to you, but having more than 2 handles seems like a situation that the plugin should accommodate.

@Umar: To attach events to the slider such as “stop” or “start”, you should be able to pass them into our plugin. To avoid conflicts with events that our plugin generates, you can bind them after the plugin generates the slider. Once it’s generated, you can get the slider in the DOM and use jQuery’s bind method to add more events, like start or stop. Try the following:

//make a slider
$(’select#valueA’).accessibleUISlider();

//add a stop event to the generated slider
$(’select#valueA’).next().bind(’stop’, function(e, ui){
//do something here on stop!
});

Since our plugin injects the slider right after the select element, we can get to it with the .next() traversal method above. You could also find it by ID or .ui-slider class name.

@silver: Our plugin generates the slider, but after that, you’ll need to address the slider code it generates instead of the selectors you started with.  The code sample above demonstrates this as well, but to use your example, you could try this:

$(’select#startPrice, select#endPrice’).accessibleUISlider({width:400});
//change handle 2’s position
$(’select#endPrice’).next().slider(’moveTo’, ‘75000’, 1);

Comment by Scott (Filament) on 09/23  at  06:41 AM

if your sider gave itself an id, that would make accessing it a little less reliant on the document not getting rearranged, but thank you for your answer (I guess I can store the slider in a variable right after I create it before there’s a chance for other code to rearrange it)

Comment by silver Harloe on 09/23  at  07:11 AM

Thank you for your help! That worked!

Comment by Umar Jadoon on 09/23  at  10:54 AM

turns out I didn’t want to use “moveTo” at all—because then I’d have to cut and paste your code to figure out the relative number of pixels I want for the option.

so I tried a different tack - whenever the user changes the select box, the slider moves to the right place, so perhaps I can just change the select box FOR the user

using your demo 1 (slower, slow, med ...)

$(function(){
//demo 1
$(’select#speed’).accessibleUISlider({width: 400});

$(’select#speed’).selectedIndex = 0; // does not seem to affect select box or slider
$(’select#speed’).find(’option’).eq(0).attr(’selected’, ‘selected’); // affects select box but not slider
});

but I can’t seem to get what I want - setting the slider to correct position for a given value :/

Comment by silver Harloe on 09/24  at  03:10 AM

I think I self-answered with this code:
$(’select#speed’).find(’option[value=Fast]’).attr(’selected’, ‘selected’);
$(’select#speed’).change(); // tells the slider to update

at least it works in the demo. yay.

Comment by silver Harloe on 09/24  at  03:50 AM

has anyone been able to figure out the IE6 issues?

Comment by iceanfire on 09/29  at  12:03 AM

i am using two handle for restricting the price range. how can i get the value of the firsthandle and the lasthandle separately.
or the start and end value of the range of selected area on slider.

Comment by tina on 09/30  at  03:57 AM

I did something similar:
startPrice and endPrice are separate selects, and my slider was made with

$(’select#startPrice, select#endPrice’).accessibleUISlider();

because the slider updates the selects, to _get_ the values, I just get whatever is selected by the selects at the current moment:

curStartPrice = $(’select#startPrice’).value;
curEndPrice = $(’select#endPrice’).value;

to _set_ the values, I used:

$(’select#$startPrice’).find(’option[value=10000]’).attr(’selected’, ‘selected’); $(’select#$startPrice’).change();
$(’select#$endPrice’).find(’option[value=75000]’).attr(’selected’, ‘selected’); $(’select#$endPrice’).change();

which is to say, I never actually touched the slider directly, I set the selects separately and the “change()” function adjusted the slider as if the user had adjusted the selects.

Comment by silver Harloe on 09/30  at  05:46 AM

@tom- set your visibility for the select to hidden:

select {visibility: hidden; margin-right: 1em; float: left; top: -3em;}

Comment by Peder Halseide on 10/02  at  10:58 AM

Found bug in:

http://www.filamentgroup.com/examples/slider/index3UI.php

When using keyboard to move sliders, you can’t go in to the next opt group (ie. it gets stuck on Jan / Dec)

Comment by Guy Fraser on 10/03  at  04:04 AM

I can confirm the bug reported by Guy on Firefox 3.0.3 on Ubuntu Hardy.

Comment by Daniel Schierbeck on 10/14  at  10:26 AM

By the way, is there any chance this will end up in Github or another open code repository? It would make it significantly easier to track the progress of the plugin.

Comment by Daniel Schierbeck on 10/14  at  10:40 AM

Is there a performance-related reason why `each` is used instead of `map`?

I was able to convert code such as this:

var elIds = (function(){
var elIds = (function(){
var tempArr = [];
selects.each(function(){
tempArr.push(jQuery(this).attr(’id’));
});
return tempArr;
})();

into this:

var elIds = jQuery.map(selects, function(select) {
return jQuery(select).attr(’id’);
});

Comment by Daniel Schierbeck on 10/14  at  11:03 AM

I’ve made a patch with some improvements: http://dl.getdropbox.com/u/177495/slider.diff

I grant you the Copyright.

Comment by Daniel Schierbeck on 10/14  at  01:44 PM

How Can i generate event
for example a write
$(function(){
$(’select’).accessibleUISlider({width: 200});
$(’select’).next().bind(’slide’,function(e, ui)
{
alert(’sxsx’);
}
);

});
Why message ‘sxsx’ removed 12 once

Comment by Alex on 10/24  at  11:45 AM

Just curious if there’s been any update with the overlap issue?

I’ve been struggling with the same issue and haven’t found a fix, or any sort of a work-around for it?

Comment by Eric on 10/26  at  04:37 AM

Very nice addon for the slider plug-in. Many thanks for making this public.

One problem I came across when testing in IE6: when the slider is active (e.g. I move the handle), the handle becomes huge. It might be that IE6 doesn’t handle relative size that well. On the other hand, I haven’t defined a font-size anywere yet. That might also cause the problem.

Comment by Leon on 10/29  at  04:42 PM

Just great, thanks for all your hard work on this!

Comment by Stewart on 10/31  at  02:15 PM

I’m trying to use it for just a simple 1-10 rating slider, displaying all 1-10 labels. So is there any way to hide or disable the tooltip above the slider? I’ve tried to just use the jQuery/UI Slider but I can’t get the stepping to work with that, even their UI/Slider stepping demo’s don’t work. But weirdly enough it does work if I use this extension.

Comment by Atilla on 11/06  at  09:16 PM

@Atilla: There isn’t an option for it, though it’s a good idea, thanks. You can hide it in the CSS though. Just change .ui-slider-handle-active .ui-slider-tooltip from display: block to display: none.

Comment by Scott (Filament) on 11/06  at  09:25 PM

Thanks for the quick reply, I will do it that way. And yeah, it would be great if disabling it could be an option in a future version.

Comment by Atilla on 11/07  at  12:40 PM

I think I have found a bug.  I have setup a the slider with:
$form = $(’#some_form’);

$(’#blah’).accessibleUISlider({width: 200, labels:2, stop: function(){$form.submit_search()}});

$.fn.submit_search = function(){
stuff here to submit an ajax call
}

In the above code, when I use the handle on the slider, the ajax call submits the correct values from the select list. I’m just calling .serialize on the form in the ajax call.  However, if I click the slider on one of the “tick” marks to move the slide, the ajax call submits the request with the previous value of the slider.

Comment by Jake on 11/15  at  02:26 AM

@Jake: Sounds like clicking the bar doesn’t trigger the “slide” event, which is the one we’re using to change the select value.
Did you try using the “change” event instead of stop?

In our plugin, we might need to move the scripting that runs on “slide” into a separate function and make sure it’s called on slide, change, and stop. You could certainly try that in the source of your version and let us know how that works for you.
This does surprise me though, since this demo visibly shows that the select menu is updating as you slide or click the bar:
http://www.filamentgroup.com/examples/slider/index3UI.php

Please let us know what you come up with!

Comment by Scott (Filament) on 11/15  at  02:54 AM

I was able to get around the bug by duplicating your slide code into a stop callback as well.  Then if I use the change event on the slider, it works.  Odd behavior though.  Even when I duplicate the slide code to stop, if I attach to the stop event on the slider, it behaves incorrectly.

Comment by Jake on 11/16  at  02:00 AM

Labels are not centered on stepping tick marks, nor they are centered on the slider handle position: they are all (but the last one) shifted to the right.
Now, when the labels are not too short and the whole slider bar is not too long, the last two labels tend to overlap.

Is there any way to center them all, please?
[I couldn’t find myself where this is defined.]

Comment by Luigi on 11/19  at  11:30 PM

Most excellent javascript code. Have you been able to use it with a vertical slider? Or is there an inherent block that prevents a vertical axis?

Comment by chase on 11/26  at  12:23 AM

Is there a option to always show the tooltip (= current value) like in previous version @ http://www.filamentgroup.com/lab/developing_an_accessible_slider/

Thanks!

Comment by Taimar on 11/27  at  06:21 PM

If you add this to jquery-ui-slider-additions.css it should work

.ui-slider-handle .ui-slider-tooltip {
display: block;
position: relative;
top: -25px;
text-align: center;
padding: .2em;
background: none;
font-size: .9em;
width: 8em;
margin-left: -4em;
text-decoration: none !important;
}

Comment by Luigi on 11/27  at  06:42 PM

Hello Chase
I also needed the slider to layout in either axis vertical or horizontal. I’m reworking the code to allow either layout. I have a working prototype which I’m testing in grade A browsers.

Comment by patrick on 12/01  at  09:19 PM

Hi, Great code.  Is there a way to execute an ajax function after the user has finished using the slider instead of everytime the slide value has changed. Thanks

Comment by James on 12/09  at  06:33 PM

Looks great! excited to implement it.

Comment by TJ on 12/17  at  01:44 AM

I understand that this correctly makes a slider:

$(function(){
$(’select#focusSel’).accessibleUISlider({width: 800, labels: 11});
});

Also, this correctly writes a cookie when a select is changed:

$(document).ready(function(){
$(’#focusSel’).change(function() {
$.cookie(’focus’, $(this).val()); // set cookie

Though, I find no way to let the slider write a cookie. I tried this:

$(document).ready(function(){
$(’#focusSel’).accessibleUISlider({width: 800, labels: 11}).change(function() {
$.cookie(’focus’, $(this).val()); // set cookie

but oddily, while the slider is created, the cookie is set *only* if I use the select, and not if I use the slider. They seem coupled, in that the select is updated when moving the slider, in fact they are not, as the cookie is not set.

Please, what should I write to have the slider write a cookie?
I have been trying for days but cannot imagine a solution.
Thanks!

Comment by Luigi on 12/18  at  07:15 PM

This way also does not seem to work:

$(document).ready(function(){
$(’select#focusSel’).accessibleUISlider({
width: 800,
labels: 11
change: function(e,ui) {
$.cookie(’focus’, $(this).val()); // set cookie
//more actions here
//…
});
});

Please, how to let the slider perform an action?
Where am I wrong?

Comment by Luigi on 12/19  at  12:02 PM

Great work!

One question ... is it possible to create a slider with two handles for a date range, so the user can set the range to 1 year and then click in the middle of the range to drag the entire range?

Comment by Mark on 12/21  at  08:47 AM

@ Mark: This feature is being added to jQuery UI now.
@Luigi: It’s hard to tell without seeing a demo page. just FYI: this version of our plugin is now frozen as we’re updating to the newest version of jQuery UI. Let us know if you figure out a solution.
@ James: I believe you’re looking for the “stop” option in UI slider.

---------
Keep in mind that this uses jQuery UI 1.5.3, which is not the latest version. Stay tuned for an update to the new UI version.

Comment by Scott (Filament) on 01/05  at  07:47 PM

I’m attaching this to select boxes that have a range of numbers from 1-100. I get the following error:

jQuery(this).slider is not a function
accessibleUISlider.jQuery.js
Line 186

Any tips? Thanks.

Comment by Robert Douglass on 01/10  at  01:29 PM

This is so cool and timely for me. I’m wondering if the new update for jQuery UI 1.6 and jQuery 1.3 will be in the next few days, weeks or months?

Comment by skube on 01/15  at  01:51 AM

@Robert: Can you post a demo link?
@skube: We should have the new slider article/script up this week.

Comment by Scott (Filament) on 01/15  at  06:01 PM

Cool, looking forward to it. I have another question, is there a way to turn off the popup balloon? I find it doesn’t update dynamically when sliding, only on mouse button release.

Comment by skube on 01/15  at  07:45 PM

This plugin has been updated to jQuery UI 1.6 and we’ve posted a new article detailing its features. You can find it here:
http://www.filamentgroup.com/lab/update_jquery_ui_16_slider_from_a_select_element/

@skube: Yes, there’s an option for hiding the tooltip in the new plugin.

Comment by Scott (Filament) on 01/16  at  01:15 AM

Hello,
wonderful tutorial! greetings from de

Comment by A.Jendrysik on 03/16  at  08:34 PM

hello
excellent tutorial… but i got one problem i want to use image slider in replace of css slider..plz solve my problem

Comment by ramesh kunwar on 04/05  at  01:11 PM

How can I change the backgrond of the slider?
For example: as in the first demo, I’d like it paint red between “slower” and “slow”.

It seems I have to add something?
Help please~

Comment by Yuxing on 04/15  at  11:36 AM

I really like your work! I have used some of your components and they are truly great. Always innovative too.

Regarding some of the plugins in jQuery UI I feel that they could be less “mojo” and more jQuery. Let me explain:

In my view the great thing about jQuery is that it’s very flexible, providing a toolset, which you can work from. Things aren’t 100% readymade, there is functionality making things easier to build. The thing with some of the UI components is that they are overly complex. There are twenty or more css hooks, for styling every last corner (rounded, in ie6), with complete widget looks. It’s too ready-made, but things will always have to be customized so as a user I still have to change stuff (after winding down all the surplus I don’t need or use). Eg. the UI stylesheets provided are two times larger than the entire css for my application, which is quite big.

Would be better if the css provided is just enough to have the objects behave correctly, eg. display block, simple borders/backgrounds so labels are clear etc. All extra css hooks, support for perfect ie6 rounded borders etc. could go into an optional extra pack of some kind. So people who prefer to use css3 and ignore ie6 could use more slim widgets. As it is now I often find it easier to write the widgets themselves, perhaps taking inspiration from the original, than using sometimes overly bloated widgets.

Just some thoughts.

Comment by Alexander on 07/25  at  12:02 AM

How can I create vertical slider instead of horizontal?

Comment by Amit Shah on 09/10  at  03:20 PM

If I want to place two different images instead of same image to slide then How can I replace e6e6e6_40x100_textures_02_glass_75.png image?
i.e. arrow image for left-right movement/slide.....

Comment by Amit Shah on 09/12  at  11:28 AM

Good work, been looking for something like this for a while

Comment by The Dazzler on 10/26  at  12:39 PM

Wow: That’s exactly what I’ve been lookin’ for!

Comment by Lido on 11/03  at  11:08 PM

Sometimes it creates 3 sliders… I have fixed with this trick:

if (jQuery(’.sliderComponent’).length==0) {
var sliderComponent = jQuery(’<div class="sliderComponent"></div>’);
....
//if inject is true, inject slider after last select element and init, otherwise return api including markup
if(sliderAPI.inject){
sliderAPI.markup.insertAfter(jQuery(this).eq(this.length-1)).slider(sliderAPI).find(’.ui-slider-range’).css(’opacity’, sliderAPI.rangeOpacity);
return this;
}
else{
return sliderAPI;
}
} // closing if

Comment by Dakkar on 11/24  at  07:43 PM

buggy in Chrome (my version is 4.0.249.43) - when sliding, the value in the “bubble” is not visible. It appears when you finishes sliding

Comment by Tomas Kapler on 12/25  at  12:14 PM

I’m new to this kinda stuff and like this slider component very much.

I however have the follwoing problem. I have two select boxes, because I want to create three sliders. However all the sliders stand within each other or slightly below the other one.

And each slide has two slider boxes to use. I used the code for the first simple example (Basic usage - a simple 1-value slider). However there same to come two of them for each slider. What am I doing wrong?

And how can I position them in a div element (each one seperate)?

Thanks in advance.

Comment by Gerben van Erkelens on 02/23  at  01:11 PM

Commenting is closed for this post.

Book cover: Designing with Progressive Enhancement

Enjoy our blog? You'll love our book.

For info and ordering: Visit the book site