Update: jQuery UI Slider from a Select Element - now with ARIA Support

Posted by Scott on 04/16/2009

We've updated our popular jQuery UI selectToUISlider plugin with ARIA support, making the jQuery UI slider widget more accessible to users on assistive devices. The plugin uses progressive enhancement to replace an already-functional HTML select element with a jQuery UI slider control, and adds a number of features for both visual users and those on assistive technologies.

What's This All About?

Our selectToUISlider plugin uses progressive enhancement to scrape the data from a select element (or two for a range) and generate a jQuery UI Slider in its place, acting as a proxy to the select element (regardless of whether it is still visible, or hidden from the user). This means you can use the jQuery Slider plugin alongside other input elements in a form and submit or serialize the form as if the slider is not even there. It also allows the user to interact and make a choice with or without javascript, since the select element can be used if the slider is unavailable.

The plugin enhances the jQuery UI slider in many ways, adding text labels and ticks on the slider axis, and tooltips that appear while a slider is being used. In this most recent update, we've also added ARIA support and a tabindex to the slider, allowing it to be accessible to users on assistive technologies, such as a screen reader. More info on that below.

Working Demo:

Demo Page

The demo above was generated from 2 HTML select elements with the following jQuery call:

$('select').selectToUISlider();

Now Updated for ARIA Support!

So what is ARIA Anyway?

WAI-ARIA, the Web Accessibility Initiative's Accessible Rich Internet Applications Suite, is a set of specifications for applying meaningful roles to web widgets, allowing them to be accessible to assistive technologies. You can find out more about ARIA here: WAI-ARIA Overview.

How we applied ARIA to the jQuery UI Slider

Following the guidelines for the slider role specified at WAI-ARIA Slider Role, this plugin now adds and manipulates the following attributes on each slider handle:

  • role(slider) The ARIA role for a slider widget.
  • aria-valuemin: The minimum value of the slider.
  • aria-valuemax: The maximum value of the slider.
  • aria-valuenow: The current value of the slider (automatically updates during slide).
  • aria-valuetext: The current human-friendly value of the slider (same as tooltip, and automatically updates during slide).
  • aria-labelledby: The ID of the label corresponding to the slider. We use the select element's corresponding label. The ID is generated if it's not in markup already.
  • tabindex: tabindex="0" is added to the slider handle, bringing it into the natural tab order of a form.
  • role of "application" to the slider's parent div: In our testing, this triggered our screenreader into the proper mode to meaningfully interact with the slider widget.

What we discovered along the way

A workaround for "aria-labelledby"

The ARIA spec provides the aria-labelledby attribute as a means of associating an ARIA widget with a label element on the page. By setting the value of the aria-labelledby attribute to the ID of a label, a screenreader should read that label's text aloud and associate the ARIA widget with its purpose.

While testing on Jaws and NVDA, we noticed that the aria-labelledby attribute was not being read aloud to the user as we expected. It seemed that while using "role=application" allowed the screenreader to recognize the markup as a slider widget, it also disabled the functionality of the aria-labelledby attribute. Unfortunately, we couldn't find a workaround, so we added a hidden span element inside each slider handle which acts in its place as a label for screenreader users. The text within the span reads "Slider control for" followed by the text contained in the form label on your page. In the case of the demo above, for instance, upon focusing on a slider handle, the screen reader will say "Slider control for Start Date", followed by instructions for using the control with keyboard commands.

To anyone who downloaded the earlier version of this plugin: The zip contains an update to the CSS file that hides this new span element visually, so be sure to update your code.

Avoiding duplicate controls for screenreader users

Now that this slider component is fairly accessible on its own, we found that, while it might be useful for a sighted user to see both the selects and the slider on the page and see them interacting with one another, it may lead to a confusing experience to screenreader users to have duplicate controls on the page that do the same thing. To work around this problem, we think it's best to hide the original select element from all users (screenreader users too) by styling it with display: none; once the slider has been generated. You can either hide the select by adding a class to it and creating a style in your CSS for it, or by simply adding a call to the .hide(); method to the end of your selectToUISlider(); call, as shown below:

$('select').selectToUISlider().hide();

The hidden select menu will still be able to store the value of the slider, so you can submit your form as if the slider was never there.

Don't want to hide the select element? If you can not hide the select element from the interface, perhaps you could provide some text for all users instructing that they can use either the select menu or the slider to accomplish the task at hand.

Using this plugin

To use this widget, you'll need to include jQuery version 1.3+, and the jQuery UI 1.7+ Slider plugin (which requires jQuery UI Core as well). You can get all of the necessary code through the zip provided below.

The following code example demonstrates the basic way to use this plugin:

HTML

<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>

JavaScript

$('select').selectToUISlider();

The following demo shows the result of the code above:

Demo Page

Developer Options

The following options are available in this plugin:

  • labels: Number, number of labels to show. Labels are shown in even distribution from the center of the slider. Default is 3.
  • tooltip: Boolean, show tooltips or not. Default is true.
  • tooltipSrc: Specific String, tooltip text source from select menu. Available values are "value" or "text". Default is "text".
  • labelSrc: Specific String, scale label text source from select menu. Available values are "value" or "text". Default is "value".
  • sliderOptions: Object, accepts native jQuery UI slider options. Note:This plugin generates some of the native slider options. For the plugin to work as shown, do not override these options: step, min, max, range, slide, and values.

ThemeRoller-Ready

ThemeRoller-Ready Just like the jQuery UI slider widget, this plugin is ThemeRoller-ready, allowing it to be easily skinned to match your website's design. You can design and download a theme for this widget at ThemeRoller.com.

Download This Code

Version 2.0: FilamentGroup_selectToUISlider.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. These progressive enhancement features will eventually be rolled into the jQuery UI slider itself. You can track its progress at the jQuery UI Planning Wiki (Slider planning page), or better, post feedback or share your own ideas about the jQuery UI planning process by joining the development and planning wiki.

Comments

link to zip doesn’t work ((

Comment by Dmitry on 01/16  at  06:28 AM

@Dmitry: fixed. thx!

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

Wow. This is works even better than the previous version. Thanks guys.

I don’t suppose there is any way to use a custom select field (something like the “Switch Theme” dropdown) instead of the default select box? Styling select boxes is near impossible.

Comment by skube on 01/16  at  11:47 AM

I was under the impression jQuery UI 1.6 required jQuery 1.3.

From jQuery’s site:
“Also, from here forward jQuery UI 1.5.3 will only support jQuery 1.2.6. And jQuery UI 1.6 will only support jQuery 1.3+”

Am I misunderstanding?

Comment by skube on 01/16  at  11:54 AM

@skube: Glad to hear the slider is working well for you.

As far as custom select menus go, there are definitely jQuery plugins out there that will help you with that. We’ve actually built them several times but haven’t gotten around to posting an article about it the process yet. The challenge is making sure that whenever you’re replacing a native form control that your replacement component handles all of the functionality of the component you’re replacing (before enhancing it with more features). It also needs to communicate back to the select menu so the form can be submitted normally, similar to how this slider plugin works. These look pretty good at a glance:
http://www.givainc.com/labs/linkselect_jquery_plugin.htm
http://www.brainfault.com/2007/07/23/select-box-replacement/

We’ve begun integrating our menu component into jQuery UI and it should be included in UI version 1.7. That plugin will handle select menu mapping like you’re talking about, as well as a multitude of other cases such as fly-outs and iPod-style navigation (see http://www.filamentgroup.com/lab/jquery_ipod_style_drilldown_menu/).

Feel free to help us plan the component on the planning wiki here:
http://jqueryui.pbwiki.com/Menu

Comment by Scott (Filament) on 01/16  at  12:27 PM

VERY sexy work guys. I will be using this for sure

Comment by TJ on 01/16  at  04:47 PM

Constraints don’t work when you use the combobox. i.e. you can specify overlapping date ranges with the combos but not with the slider.

Comment by Craig on 01/16  at  10:37 PM

@Craig: Thanks. That’s actually a reported bug in jQuery UI’s slider plugin. Programatically setting the values doesn’t trigger the handle value validation script. The bug is marked to be fixed in the tracker for 1.6 final I think.

That aside, the common use of this will be setting the selects to display none once the slider is there. So at least it isn’t a major issue in the meantime.

Comment by Scott (Filament) on 01/19  at  09:56 AM

nice work!
but I wan to know how to change it when onclick that float box,the select forms well be submited.

Comment by ray on 01/19  at  01:18 PM

Thanks for the tip about custom select menus. I tried to implement each of them separately, but they don’t seem to communicate with the slider nor vice versa.

Have you been successful with using the jQuery UI Slider with your plugin in combination with a select menu replacement plugin? If so, I don’t suppose you have an example? ;)

Comment by skube on 01/19  at  05:00 PM

Something rather wrong with the styling - with both sliders the label that appears is clipped on the left when the slider is at its leftmost position, and when at the far right it clips the right hand side AND causes a horizontal scrollbar to appear.

I am testing in FF 3.05 and this behaviour occurs with all the themes.

Otherwise, great job, handy widget!

Comment by MarcusT on 01/19  at  08:35 PM

@skube - We haven’t used the custom dropdown with this slider so you’ll probably have to so some customization. Hope it’s a good start for you.

@MarkusT - The clipped tooltips and horizontal scrollbar is just a byproduct of the way we’ve embedded these demos into iframes to make it easy for people to see an example in the main narrative of the page. If you open the example in a new page, you’ll see it looks right in FF 3.0.5. The iframes just aren’t smart enough to display this right.

Comment by Todd (Filament) on 01/19  at  08:41 PM

Can you give an example of proper syntax when using sliderOptions? Say I wish to override the jQueryUI slider option “stop”. Would the syntax be:

$(select).selectToUISlider({
stop: function(e,ui) {
alert(’stopped’);
}
});

Comment by skube on 01/20  at  10:49 AM

@skube: pass any native slider options into the “slideroptions” option of this plugin. This plugin has its own options so we separated the native options this way.

$(select).selectToUISlider({
sliderOptions: {
stop: function(e,ui) {
alert(’stopped’);
}
}
});

Comment by Scott (Filament) on 01/20  at  11:08 AM

I’m wondering how to call a function when a value changes via the slider. I have tried adding onChange="alert(’a’);" to the <select>, and have tried binding change to a select also.

Comment by doom on 01/20  at  08:43 PM

@doom: If you want the function to fire after you let go of your mouse button, you do exactly as Scott outlined above. Use the “sliderOptions” option to access the jQuery UI Slider’s “stop” option, which fires when the slider has stopped moving.

Comment by skube on 01/21  at  11:21 AM

Is there an API for obtaining the current value of the slider? Similar to the way the tooltip works, but say instead you wish to update an element elsewhere on the page with the value slid to.

Comment by skube on 01/21  at  11:37 AM

@skube: Yes. See Richard’s response to this thread: http://bitly.com/LEbC
We’re in the process of updating the jQuery UI docs to 1.6, so we apologize for the confusion.

In general, if anyone has questions concerning native jQuery UI plugin options and methods, you can always post them to the jquery-ui-dev google group.

Comment by Scott (Filament) on 01/21  at  12:05 PM

Thanks Scott. Also, small error in your docs regarding the labelSrc option. It defaults to “value” not “text”.

Comment by skube on 01/21  at  12:20 PM

Maybe this is a dumb question (along with all my others), but how do you assign an ID to the dynamically created slider widget?

Comment by skube on 01/21  at  12:32 PM

Great Stuff, one problem is (with the jQuery UI Slider) - if i drag both slid problem? I’ve tried to hide the left slider if the right slider is total left but that doesn’t help..no chance to drag it. :(

Comment by Webdawson on 01/25  at  07:40 PM

Can you give an example of how you would call other native slider methods, for instance:
slider( “moveTo”, value, index )

for your slider?

Comment by ngupta on 01/26  at  12:54 PM

Oh sorry - i wanted to write: Great stuff one problem is (with the jQuery UI Slider) - if i drag both sliders to the left, than i have no chance to drag the slider to the right anymore. Any solution for this problem? I’ve tried to hide the left slider if the right slider is total left but that doesn’t help..no chance to drag it. :(

Comment by Webdawson on 01/26  at  01:15 PM

@skube: Thanks, we fixed it in the docs.
The slider is always appended after your selector used to make the slider, so in other words, you can get to the slider through the .next() method after you build it. Then you can do whatever you want to it, such as adding an ID:
$(’select#foo’).selectToUISlider().next().attr(’id’, ‘myId’);

@ngupta: as noted above, you can get the slider through the next() method, so that’s where you’ll direct your slider methods. I guess you could even set a variable to the return of your slider plugin creation and add .next() to the end to keep your slider easy to refer to. Like this:
var mySlider= $(’select#foo’).selectToUISlider().next();

Then you could apply methods like this:
mySlider.slider( “moveTo”, 56, 0 );

Comment by Scott (Filament) on 01/26  at  01:36 PM

hrm...that unfortunately didn’t work for me. What is the best way to move the slider programmatically?

Comment by ngupta on 01/26  at  03:11 PM

@ngupta: Oh right, sorry. The slider API has been updated and that moveTo method is no longer available. Instead, you should use value.
mySlider.slider(’value’, 10);

This will be better documented later this week when we finish up the UI 1.6 release, but the docs mention this change here: http://docs.jquery.com/UI/Slider/slider#.22moveTo.22valueindex

Comment by Scott (Filament) on 01/26  at  04:11 PM

Hi, thx for the plugin, nice work! Can anyone help with a jQuery val() and alert(’Max Qty Reached’) ? I’m using a slider as a Quantity select. In my jQuery script I trigger a select alert if the user selects more than 1000 qty. But—does anyone know how to get my alert to popup using this filamentgroup slider? Note: the select DOES change on slide. Thanks anyone!

Comment by Sem on 01/27  at  02:14 PM

@Sem: try this:

$(’select’).change(function(){
if( $(this).val() > 99 ){
alert(’Max Qty Reached’);
}
});

Comment by Scott (Filament) on 01/27  at  02:36 PM

Thanks Scott. I have an almost identical block as you suggested - which works fine. However, if I *slide* past say, 99, the alert does not trigger. It only triggers when I change() the select menu itself. Should I bind an onrelease event to the slider ya’think? Sorry, still new to jQuery and all over the Docs. Thanks again.

Comment by Sem on 01/27  at  03:22 PM

@Sem: You could bind to the slider’s change event as well.

$(select).selectToUISlider({
sliderOptions: {
change: function(e,ui) {
if( ui.value == 100 ){
alert(’Max Qty Reached’);
}
}
}
});

Comment by Scott (Filament) on 01/27  at  03:25 PM

Got it! I was missing the—stop—option. Thx again.

Comment by Sem on 01/27  at  06:28 PM

Yo sem, try this…

jQuery(function($) {
function sliderQty() {
$(’select#qty’).selectToUISlider({
labels: 20,
tooltip: true,
tooltipSrc: ‘text’,
labelSrc: ‘value’,
sliderOptions:{
stop: function(){
if ($(’select#qty’).val() == 10000){
alert(’Max 10,000 Qty Reached.’);
}
}
}
});
}
sliderQty();
});

Comment by Tada Burke on 01/27  at  08:21 PM

Line 133 seems to use a reserved keyword ‘int’ for a variable name which keeps yui compressor from mini-fing it/

Comment by a on 01/29  at  10:56 PM

@a: We’ll update this plugin once UI 1.6 final is released. Once that happens, we can rename the conflicting variable. For now, you can just find replace ‘int’ with a non-conflicting name. Thanks for the heads up!

Comment by Scott (Filament) on 02/05  at  11:51 AM

This code and zip are now updated to jQuery 1.3.1 and UI 1.6rc6. It should still work fine for UI 1.6rc4 as well if you need to use jQuery 1.2.6.

I also fixed the int var conflict - thanks @a.

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

It seems that when you have your elements hidden first, then the slider won’t show up correctly. I’ve seen that problem here on this site as well in your example just above the ‘Features and Updates’. When you open it in the new window all seems nice, but when you just look at it like this, it’s all packed together.

I’m having this problem as well as my selectboxes are in a tabbed panel which is hidden at first. Even when I show the panel directly and run the initiation of the slider after it, it still shows up incorrect all packed together.

Any thoughts on this one?

Thanks,

Erik

Comment by Erik on 02/09  at  05:24 PM

I don’t seem to find the way to write a cookie when the slider stops.
I tried many ways, the last being

$(function(){
var mySlider= $(’select#speed’).selectToUISlider().next({
sliderOptions: {
stop: function(e,ui) {
$.cookie(’speed’, mySlider.val()); // set cookie
}
}
});
});

but always fail.
What would the right approach be, please?

Comment by Luigi on 02/10  at  05:55 PM

$(function(){
$(’select#speed’).selectToUISlider({
sliderOptions: {
stop: function(e,ui) {
$.cookie(’speed’, $(’select#speed’).val()); // set cookie
}
}
});
});

This works!
Thanks

Comment by Luigi on 02/11  at  04:14 PM

Is there a way to always show the tooltip?
by default the tooltip is shown when begin to drag the slider, and disappears when the slider looses focus.

i could not find the position where this is happening… please help,
thanks in advise

Comment by Andy on 02/12  at  04:56 AM

Great work on the slider it’s excellent! The math for label placement seems to be off though. My slider starts at 5 and ends at 100 with a 5 step incrementation so that’s 20 options in all. With three labels there is no “center” so the toss up should be between the two middle elements but the middle label ends up on the element before the two middle elements instead. This behavior continues if I increase the label amount with the slider putting the new labels close together and then having a big jump to the last label.

Also if I add one more option so my slider starts at 0 instead of 5 and choose three labels then the middle label ends up at 35, not 50. That’s element 8 out of 21. The expected placement of the third label is element 11 since that is right in the middle (10 elements on each side) in this case.

Comment by Marcus on 02/12  at  07:23 PM

@Andy: The tooltip is hidden in the CSS.

Replace lines 9-21 in ui.slider.extras.css with something like this


.ui-slider .ui-slider-tooltip {
display:block;
font-size:0.9em;
margin-left:-4em;
padding:0.2em;
position:absolute;
text-align:center;
top:-25px;
width:8em;
}
.ui-slider .ui-state-active .ui-slider-tooltip, .ui-slider .ui-state-focus .ui-slider-tooltip, .ui-slider .ui-state-hover .ui-slider-tooltip {
font-weight: bold;
}

Comment by Ian on 02/13  at  12:35 AM

Hi there,

When I create a really long select list the slider gets pressed together. (see my screenshot - http://www.imageno.com/jq5qxei57bzdpic.html)
The same thing happens with the example on this website with the two dates slider.

I’m using:
OS: OSX 10.5.6
Browser: Safari 3.1.2

Hope you can help,

J

Comment by Jeroen Nicolaï on 02/13  at  09:07 AM

i get the same thing as well
http://www.imageno.com/jq5qxei57bzdpic.html

need help

thanks
anand

Comment by Ananda Agrawal on 02/15  at  01:30 AM

Hi everyone,
As a few people pointed out, there was a slight problem with this plugin and the new UI slider in that UI tries to auto-detect the slider orientation (horizontal or vertical) and will set it to vertical if its parent container is less than a certain width.
I’ve updated the source code and zip with a fix that sets the slider’s orientation option to ‘horizontal’ by default. This should fix the stacking issues people were seeing.
Thanks!

Comment by Scott (Filament) on 02/16  at  01:03 PM

Thanks Scott! Have a good one.

Comment by Jeroen Nicolaï on 02/16  at  04:00 PM

@Jeroen: sure! Glad it helped.

The UI team will be changing the slider to default to ‘horizontal’ in the future as well. The auto option will be removed.

Comment by Scott (Filament) on 02/17  at  07:05 PM

Great work Scott !
We have decided to include your tool in our ecommerce plateform Plici (http://www.plici.net).
Today, we have released the version 1.0 with your tool include. You can see in action on the french demo website http://theme1com.simpliciweb.net/admin_NtRTPL/l1/ (demo/demo) in category “Statistiques"->"Statistiques"->"Commande".

Have an good day

Comment by Nicolas SOTRON on 02/19  at  11:28 AM

I want a vertical slider. Please show us an example where the selectToUISlider has been customized into a Vertical slider. Thanks in advance.

Comment by kris on 02/21  at  11:21 AM

Hello,

How would I be able to have a text on top displaying the range like one the default UI Slider?

As seen here:
http://jqueryui.com/demos/slider/#range

I tried the code they have there and it gives me values but none are related to my select values or text.

Thanks in advance

Comment by RS71 on 02/23  at  07:22 PM

I’ve noticed that if I use the slider event, the slider doesnt actually change the values. How would I use the slider and stop events?

Comment by RS71 on 02/23  at  08:08 PM

Thank you for great work!

Comment by Alexandr Borisov on 02/26  at  02:51 AM

In the spirit of giving back to the community…

added 2 things based on my requirement of displaying a disabled slider when converting from a disabled select:

var sliderOptions = {
disabled: $(this).attr(’disabled’),

and

thisHandle.parents(’.ui-slider:eq(0)’).slider("values", handleIndex, thisIndex, sliderOptions);

cheers!

Comment by Dennis Hall on 02/26  at  03:20 PM

there a way to show multiple values on the slider?  I want to represent time segments on the slider itself, and allow the user to select, and then tweak the segments, even add new ones, without overlapping.

I guess with the way you have done this with select boxes, there a way to show multiple value sets on the 1 slider?

Thnx

Comment by Grady on 03/04  at  02:22 PM

Hi,
thx for this ‘superbe’ plugin.
I’m actually trying to display a fixed tooltip, not following the slider, using CSS or adding an option on the select-to-slider option.

I could pass a native slider option into the “slideroptions” option, like :

$(select).selectToUISlider({
sliderOptions: {
slide: function(e,ui) {
$(’#My_Specific_Info_Area’).html(ui.value);
}
}
});

But I would really like to use the plugin like this :
$(select).selectToUISlider({tooltip: true, tooltipPosition: fixed});

Can anyone help ?

Thanks in advance

Comment by Fred on 03/05  at  04:38 AM

I find when trying to set the slider values via JS, I can only get the SELECT list to change but not the actual slider itself.

I have two handles and I’m using the following:  $("select#mySelect").slider("values",0,0);

Comment by skube on 03/09  at  12:15 PM

this is a great use of the slider! one suggestion is to hook into the onchange event of the select box since we aren’t supposed to overwrite the slide method provide by native sliders.

i added this on line 96:
$(currSelect).change();

now you can define your select box’s onchange event!

Comment by jason kuhn on 03/10  at  02:10 PM

@jason kuhn

Thanks, This is a great feature to add. Solved a problem for me very quickly.

Comment by Jarod Knoten on 03/11  at  02:41 PM

Great plugin!

Is there a way to specify which two selects to build the range from?

I have a case with more than two selects on the same page.  I tried this out on a page with some selects at the top and some the date selects towards the bottom, and the result was messed up since it’s being called on $(’select’).

Thanks!

Comment by Neal Lober on 03/11  at  04:43 PM

I think there might be a bug that is only apparent when the slider is shrunk to smaller widths.  When the upper pin is near the end and you click on it, it automatically moves to the left.

Thanks

Comment by Burke Davis on 03/12  at  04:44 PM

There seems to be a huge bug in ie6 and 7 as to the labels underneath the slider--they get covered up for some reason. Any ideas on how to fix that?

I’ve loaded the examples on this site in ie6 and i’m getting the same bugs, so I know its not just my implementation of it.

I’ve also used netrenderer and it comes up with the same flaw(http://ipinfo.info/netrenderer/index.php).

This problem also shows up on ie7!

Comment by iceanfire on 03/12  at  08:34 PM

i’m having the same problem iceanfire had, tested succefully on firefox 3+, safari 3+ but ie6 as usual is givin’ me a headache

thanks!

Comment by patchinko on 03/13  at  05:25 AM

Hi,

I’m getting an “contructor is null or not an object” error in Line 75.
...
function isArray(obj) {
return obj.constructor == Array;
}
...
I’ve put it in a try and catch, but then I get another error in line 84 and so I gave up.

I’m using jQuery 1.3.2
jQuery UI 1.7
ASP.NET (VB)

- Script files are all found (according to Firebug)
- The start code is like this:
$(document).ready(function() {
$(’select’).selectToUISlider();
});

- My Select code is:
<select name="task-rating-start" id="task-rating-start-<%=Model.TaskID %<” class="task-rating-start">
<option value="-1" selected="selected">Not yet evaluated</option>
<option value="0">Not Developing Currently</option>
<option value="1">Learning Concept</option>
<option value="2">Understands Concept</option>
<option value="3">Consistently Applies Knowledge</option>
<option value="4">Mentors Others</option>
</select>

Please let me know what I’m doing wrong.
Thanks,
Matthias

Comment by Matthias Otto on 03/17  at  11:12 AM

My bad, I was to fixed on checking versions, that I didn’t pay attention to where I was looking for the selects.

Thanks for this great piece of UI.

Comment by Matthias Otto on 03/17  at  11:25 AM

Awesome!! I was just pondering how to make slider work for dates. This is exactly what I was looking for! Thanks!!

Comment by Adam on 03/20  at  09:38 AM

Good work, but there is a problem with displaying in ie6 ((

Comment by Dmitry on 03/23  at  11:47 AM

This plugin is now running on jQuery UI 1.7.1 and jQuery 1.3.2. All of the demos are updated and some bug fixes are included for IE6 and 7.

@patchinko, @Dmitry, @ iceanfire: Updating the code to the newest version of jQuery UI fixed some of the issues in IE6. There are still some minor pixel differences in that browser, but it’s usable. Let us know if you come up with any fixes.

@Matthias Otto, @Adam: You’re welcome. Glad you like!

@Burke Davis: Are you still seeing that bug? I think it should be fixed with the new version of jQuery UI.

@Neal Lober: It’s up to you how you call it. You can specify the selects by id or class if you’d like… $(’select#dateA, select#dateB’).selectToUISlider();

@jason kuhn: neat idea. We’ll think about adding that.

@ skube: you’ll want to call that on the slider itself, not the select. Try finding the slider div and calling the slider methods on that. it should be appended after your select menus.. so .next() should do it.

@ Fred: You should be able to bind your slide event in addition to the one we’ve preset by using the bind method…
$(’.selector’).bind(’slide’, function(event, ui) {
$(’#My_Specific_Info_Area’).html(ui.value);
});
Let me know if that works.

@ RS71: See my comment to @Fred.

@ kris: We have not built a vertical version of this plugin. When these features are integrated into jQuery UI, you’ll likely see a solution for that.

@Grady: can you show us a visual example?

@Dennis Hall: Nice! We’ll see about adding that in there.

Comment by Scott (Filament) on 03/23  at  03:49 PM

Here is a URL to what I was thinking ...

http://www.gradykelly.com/multislider.png

The idea would be, there are multiple data points and they are all shown on a single slider.  You could only edit a single set of data at a time, either by clicking on the little grid, or the marked area in the slider.

Comment by Grady Kelly on 03/23  at  04:33 PM

Hi Grady,
This seems interesting. It might be worth posting to the jQuery UI lists though since it’s more of a slider plugin constraint than something with our plugin.

Comment by Scott (Filament) on 03/23  at  04:43 PM

I’m wondering if there is a way to specify a minimum allowable value for a leading handle of a range slider?

Comment by skube on 03/25  at  10:55 AM

Am trying to get a two-handle slider to trigger an event when a handle is released, as per the code discussed above on 01/20, but all I’m managing to do is break the slider! Does anyone have an example page they can show me which shows this in action?

Comment by Jon on 04/10  at  03:41 AM

Hey everyone. Good news! We’ve updated this widget with ARIA features, making the jQuery UI slider widget more accessible to users with assistive technologies like screen readers.

Check out the new article and script here: http://www.filamentgroup.com/lab/update_jquery_ui_slider_from_a_select_element_now_with_aria_support/

Comment by Scott (Filament) on 04/17  at  12:54 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”.

Comment by Yuxing on 05/04  at  03:55 AM

May I suggest a slight modification of the computation of the increm variable:
var increm = Math.max(1, Math.round(selectOptions.length / options.labels));

This prevents increm from being zero and the subsequent loop to consume all my cpu-time (and life-time).

Very cool plugin !

Comment by jonne on 05/13  at  08:34 AM

@Yuxing: You can change the appearance of this plugin by creating a theme for it at http://ThemeRoller.com

@jonne: Thanks for the patch. The script is now updated with that fix. Out of curiousity, what conditions were giving you a 0 increment?

We’ve made some nice updates to this plugin, such as arrows under the tooltips. Please view the updated article for info:
Update: jQuery UI Slider from a Select Element - now with ARIA Support

Comment by Scott (Filament) on 05/13  at  12:10 PM

Hi Scott,

I set the number of labels to 7, like the example you provided, and then generated
the select options dynamically (from database data). In the case I was considering there were two dates, hence, math.round(2/7) = 0. In general, it went wrong if the number of labels is more than twice the number of select options.

I have one problem to solve, hopefully you can help me with it. I cannot seem to
set the slider to a certain value. Should be easy, and as done below, according to some documentation I read. However, I must be doing something silly, do you see it? The console.log correctly prints value = 0 (min = 0, max = 1).

I used your .next().attr(’id’, ‘timeSlider’) technique a few message above to set the id, and then:

var val = $(’#timeSlider’).slider(’option’, ‘value’);
console.log(’Time slider: value = ‘ + val);
$(’#timeSlider’).slider(’option’, ‘value’, 1);

Thanks again,
Jonne.

Comment by Jonne on 05/13  at  12:29 PM

Do you have any idea how can we have multiple range in the slider

Comment by mahdi on 05/14  at  05:26 PM

thx for it. i dont know where i implements it. but it is very nice :)

Comment by projektowanie-stron-internetowych on 05/17  at  08:30 AM

This seems interesting. Thanks

Comment by evden oturarak para kazan on 06/26  at  05:39 AM

Thanks Scott, Very cool plugin !

Comment by photographe liège on 08/08  at  01:17 AM

My bad, I was to fixed on checking versions, that I didn’t pay attention to where I was looking for the selects.

Comment by accessoires pour chiens on 08/27  at  02:04 PM

Thanks for the patch

Comment by evden oturarak para kazanmak on 09/11  at  05:43 AM

forever living ürünleri hakkında bilgi alabilirsiniz.

Comment by besin tamamlayıcılar on 09/22  at  07:52 AM

Nice plugin, useful:)

Comment by psychologue liège on 10/09  at  12:03 PM

Nice one mate. I have also added the link to your post in my Ultimate collection of top jQuery tutorials, tips-tricks and techniques to improve performance. Have a check below:

http://technosiastic.wordpress.com/2009/09/24/collection-of-top-jquery-tutorials-tips-tricks-techniques-to-improve-performance/

Comment by Shahriar Hyder on 10/12  at  12:27 AM

No comment....

Comment by psychologue à domicile belgique on 10/22  at  04:44 PM

Very cool! thanks

Comment by Valea Prahovei on 10/29  at  08:30 AM

How to validate if the End date is less then the Start Date?

Comment by Tushar Dave on 10/31  at  06:18 AM

Thanks, Very cool plugin !

Comment by photographe enfants liège on 11/04  at  07:11 PM

This is a great plugin. filme bune si noi

Comment by Filme Noi on 11/17  at  03:59 PM

The labels underneath the slider got covered up for some reason. I have the latest version of the code but still in ie 6 the entire labels are not showing up. Its seems a major issue for me. Can any one suggest me a work around for this.

Thanks,
Krishna

Comment by krishna on 11/18  at  05:28 PM

hello,

Sorry for my english.
I do a slider with two cursors. There is always one step betwen the two cursors.
the problem: when I click whereever between two cursors (two intervalls), I would like that the label of cursor left always show ( at the moment if I click on more an half of interval it’s a date of cursor right show). I think that i must modify jquery.ui but I don’t know where..

Please help me.

Thank’s for your help.
Bren

Comment by Bren on 11/19  at  04:42 PM

Why when I have generated ID (JSF) so with : e.g: form:valueAA, form:valueBB the second select is never updated.It’s always the first one who’s updated.
Is it a bug or there is a solution to fix that?
Here is my script:

jQuery(document).ready(
function() {
jQuery(’select[id=form:valueAA], select[id=form:valueBB]’) .selectToUISlider( { labels : 21 });
});

Thanks

Comment by Wathelet thomas on 11/27  at  11:11 AM

Hey friend,
can u give this slider files working with jquery-ui 1.2.6 and jquery-1.2-core. I need that.. plz give me that code it will be great help...i cant use latest verison of ur Slider working with jquery-ui-1..7.2 and jquery-1.3.2...because it is getting clashed with my richfaces scripts....normal slider with jquery-ui.1.6.2 is working fine with my application. Thats y i need that.... it will be great help for me…

Comment by sushant patil on 12/07  at  08:21 AM

I have created a slider with values 0 to 10 in increments of 1 (with 5 selected). The labels automatically appear at position 0,4 and 10 - shouldn’t the labels appear at positions 0,5 and 10 ?

Comment by Joe Privett on 12/09  at  07:56 PM

when i change the value at the slider, the onchange event on select tag doesn’t fire up, any idea?

example
<select onchange="getValue()">

the getValue() doesn’t trigger when i change the value via slider

thank you

Comment by nel on 12/28  at  05:42 AM

Help!  I cannot get the orientation to work. My code:
$(’select’).selectToUISlider({orientation: “vertical"});
What I am doing wrong?

Comment by mark on 01/06  at  01:13 PM

This is a great plugin. Very thorough. 

My current design requirements ask for different background colors to the left or right of the handle. Much like the current range option only with one handle.

Any suggestions on how to pull this off? 

Simply making it a range slider and hiding the first handle isn’t an option as you can still click within the range and move the first value. 

Suggestions on where in the code to start tweaking?

Thanks

Comment by MilesD on 01/27  at  12:07 PM

EXCELLENT plugin guys!
BUT, how can I detect which button has been moved? I use
sliderOptions: {stop: function(e,ui) {alert(ui.value);}
...which gives my the index-position on the slider… but for which of the both buttons??
thanx for help :-)

Comment by cheops on 02/26  at  01:01 PM

Hi,

Very nice plugin...i love it.
I’m using it in my application.I came across one issue while implemeting it in my app. As this is using select element, it conflicts with other select elements in the same page. Ofcource i solved this my checking the id’s of actually required select elements.

Do you have ant better solution than this?

Thanks,
Suresh

Comment by suresh on 04/16  at  04:43 AM

Very nice plugin.  Unfortunately, my requirement is to be able to drag the selected range rather than have arbitrarily one of the endpoints snap to the mouse event.  It’s strange ... to me dragging the range seems like the most intuitive user interaction ... and yet, for the life of me, I can’t seem to find any framework that supports such an operation.

Comment by Kevin Neufeld on 04/19  at  05:48 PM

Hi there, i have some troubleshooting. I copy your solution;
$(select).selectToUISlider({
sliderOptions: {
stop: function(e,ui) {
alert(’stopped’);
}
}
});
but after that my slider disappeared. Any help?

Comment by Peter on 05/02  at  06:11 AM

Hi, just a heads up - you need to add some semicolons after your

function() {
// ...
}

statements, or the code breaks with any sort of concatenation with other js files, or newline-stripping js minification. Otherwise, great script - cheers.

Comment by Greg Brown on 05/11  at  06:07 PM

Hello,

I was trying to programatically set the value of slider using a different icon on the row (not from a click on the slider or the select box). How do I change the slider value? I tried something like you suggested above using the slider in your example with the speed range:

var mySlider= $(’select’).selectToUISlider().next();
mySlider.slider(’value’, ‘Faster);

The value does not change. I am using the newer version of this plugin that supports ARIA.

Comment by Bec on 06/08  at  02:27 PM

Hi,…

I want to fix the position of the slider bar in the design of my web page,… i want to place the slider in the specified row and column of the table,.... but the slider acquire position itself,.... so plz give me the information about this,… how can i do this,....

Thanks for your support in advance

Comment by Pardeep on 06/18  at  08:07 AM

Post very interesting, thanks for information.

Comment by betclic.fr on 09/02  at  07:01 AM

hmm How do I change the slider value? I tried something like you suggested above using the slider in your example with the speed range:

var mySlider= $(’select’).selectToUISlider().next();
mySlider.slider(’value’, ‘Faster);

The value does not change. I am using the newer version of this plugin that supports ARIA.

Comment by vakantie turkije on 09/05  at  07:01 AM

very usefull for me

I am Website Designer in india

Comment by Va infotech on 09/07  at  06:29 AM

It is very Useful for me and i am also web developer in ahmedabad.

Comment by vainfotech on 09/07  at  07:08 AM

I’m having this problem as well as my selectboxes are in a tabbed panel which is hidden at first. Even when I show the panel directly and run the initiation of the slider after it, it still shows up incorrect all packed together.

Comment by basur on 11/02  at  04:08 AM

Sorry,

How can I remove the slider????

Comment by Pedro on 11/12  at  06:51 AM

Stupid question - how do I hide the selectbox?

I only want the slider to be visible.

I assume that’s what most users are doing, I just don’t know how.

Thanks

Comment by Basil on 11/13  at  05:07 AM

I assume that’s what most users are doing, I just don’t know how.

Thanks

Comment by porno on 11/20  at  02:30 PM

My current design requirements ask for different background colors to the left or right of the handle. Much like the current range option only with one handle.

Comment by sigara bırakma on 12/01  at  06:04 AM

Hey Guys, this plugin is great. But I have a small question, take a look the screenshot: http://cl.ly/343Q1V3X0z1q0o3a1e1z

What I want to do is change the color of the circles between the range selected, so what I need is add a special CSS class to them when you move the slide. Is that possible?

Thanks,

Diego.

Comment by Diego A. Peralta on 12/11  at  11:16 PM

Hi,
eeh it seams the plugin has a bug or am I missing something.  Even in your working demo on this site.

If I klick on the select box and change the date, and then mouse over to the slider which was changed the mouse over Label still contains the old value.
Are you planing to solve this problem? Or is there a workaround?

Regards
Gido Carper

Comment by Gido Carper on 01/06  at  03:08 PM

Gido, you’ll find the latest version of the select-to-slider plugin here: http://www.filamentgroup.com/lab/update_jquery_ui_slider_from_a_select_element_now_with_aria_support/

Comment by Maggie (Filament) on 01/06  at  03:27 PM

Hi,

I know, but on the update the bug also appears

Regards
Gido Carper

Comment by Gido Carper on 01/06  at  05:09 PM

Great plug-in! Thanks.

One thing, I think you need to trigger a change on the selects when you adjust the slider. This is useful if you want to bind a change event to the selects.

Changing line #97 from:

currSelect.find(’option’).eq(ui.value).attr(’selected’, ‘selected’);

to

currSelect.find(’option’).eq(ui.value).attr(’selected’, ‘selected’).trigger(’change’);

does the trick.

Comment by Doug on 01/30  at  04:15 PM

hi, how can i integrate this with jquery ui date.picker?

Comment by ugur on 04/12  at  09:13 AM

How to hide select box??
Please help me

Comment by Payal Patel on 05/04  at  01:55 AM

To resolve error on selected value, you can chage the .attr(’selected’, ‘selected’) to .prop(’selected’, true).

Comment by Andre Alves on 05/27  at  07:50 PM