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:


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:


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:


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



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

Book cover: Designing with Progressive Enhancement

Enjoy our blog? You'll love our book.

For info and ordering: Visit the book site


This great plugin should be merged into jQuery UI slider as official feature.

Comment by Cloudream on 04/17  at  07:50 PM

I can think of dozens of great uses for this.  Very nice!

Comment by Nikola on 04/17  at  10:17 PM

There seems to be a slight bug when the final character of text is a “-”.  The minus character strangely drops down on the next line.

For example, just change “6am” to “6am-” in the example and you’ll see what I mean.

But still, A GREAT SCRIPT!

Comment by Burke on 04/18  at  12:21 AM

To clarify, I have only experienced this bug in IE7

Comment by Burke on 04/18  at  12:55 AM

@Cloudream: Thanks. I agree that this plugin is ready to move to UI. Let’s get the details into the planning wiki and get things moving!

@Nikola: Glad you like!

@Burke: Interesting, we will check into that issue. Thanks.

Comment by Scott (Filament) on 04/20  at  05:34 PM

Incredible! I would give my left arm for a demo of the date range slider coupled to an event list that updates dynamically based on slider input!
Great stuff! Thanks!

Comment by Adam on 04/21  at  07:24 PM

This is a great control!  Agree this really should really be merged with the standard JQuery slider.

However, one issue—not sure if its a bug or a feature :-)—is that labels with a space or hyphen (-) are wrapping for me.  Any way to prevent that?  If there is no space or hyphen (e.g., if I change the space to an underscore), there is plenty of room to display the full label on one line.  Is wrapping the label a feature?

Comment by DFilip on 04/23  at  07:09 PM

Great plugin.
There is a little bug : when you change the html select, the handle is moved, but the tooltip is the same and there is no event trigger.

Comment by Ludovic on 04/30  at  11:45 AM

Great plug-in, but does anyone know how to affect the wrapping of labels, as well as the orientation of labels to tic marks?  I am still having troubles with the labels wrapping if there is a space in the label name, and something (?!) that I did is now getting the labels to align to the right of the tic marks, as opposed to center over the tic marks.

Comment by DFilip on 04/30  at  06:19 PM

This plugin is exactly what I needed! Only one important thing: is there a way to set a range with a fixed min value?

If there isn’t, any hints on how to achieve it? (I tried using two “select"s and setting first’s “option"s as “disabled”, but it didn’t work)


Comment by Xar on 05/04  at  10:24 AM


Really great plugin. The only thing I cant get working is the binding. I want to update a div with current range values as in http://jqueryui.com/demos/slider/#event-change.

I tried this:
$(’select#min_price, select#max_price’).bind(’slide’, function(event, ui) {

but that does not work.. any ideas?

Thanks a lot!

Comment by Tair on 05/06  at  08:13 PM

Holy hell. I had to click the “this post is outdated” link 5 times to get to this article. I mean, I’m glad you keep improving this thing but damn.

Comment by cwd on 05/08  at  07:50 PM

How would you create a default option which has no value, and does not show up on the slider? I mean, you can obviously set the default value to be a side, or one end, but what if you wanted to have the select return nothing unless the slider was moved or clicked? kinda like those radio boxes that you can’t uncheck after you choose one of them.

Comment by seady on 05/09  at  06:30 AM

@Tair: I managed to bind a function to the change event of the slider by modifying the sliderOptions variable:

$(’select#pFrom, select#pTo’).selectToUISlider({
labels: 10,
sliderOptions: {
change:function(e, ui) {
alert(’changed’+$(’select#pFrom option’).eq(ui.values[0]).text());
alert(’changed’+$(’select#pTo option’).eq(ui.values[1]).text());

The problem is you can’t bind a function to the slide event, as it will ruin the functionality of the slider (updating the original selects and the labels of the slider), but i think that the change event should suffice ;)

Comment by Wiseon3 on 05/09  at  08:22 PM

We’ve updated the script with a quick bug fix for where the ARIA role="application" is applied. You can grab a copy of the zip above to get this update.

Comment by Scott (Filament) on 05/11  at  11:56 PM

Hi guys!

Quick hello from Down-under… Thank you for publishing your work on the slider, it’s a really nice improvement from standard ui slider.
It did pick a small bug:

When using the select drop-box the tooltip is not updated although the slider moves to the correct position.
Need to add to the ‘selects.bind’ function the following:

selects.bind(’change keyup click’, function(){

// Update the tooltip
var textval = ttText(thisIndex);
.attr(’aria-valuetext’, textval)
.attr(’aria-valuenow’, thisIndex)
.text( textval );

Also I have written an alternative function (inputToUISlider) on that takes a select selector and an input selector. I use the select to decorate the slider (with scales etc) only and use the input selector as the controller: update value and also take in user input.
It works well although you could probably improve it. There is a couple of hacks in the script that i had to put in the end to get around errors.

Let me know if you’d want to look at it.
Cheers / Matt

Comment by Matt Lohier on 05/12  at  02:44 AM

Another bug (tested only in FF3) - if you put a negative date range in using the selectors (e.g. June 2008 - July 2007) the resulting slider is displayed incorrectly. Additionally, if you click on one of the two slider endpoints, it jumps to the same position as the other one.

Such invalid range cases surely need to be handled automatically by the slider widget rather than rely on implementing developers to add it each time?

Comment by Marcus Tucker on 05/12  at  06:37 PM

A few updates and bug fixes:
1. This plugin now has stylized arrows beneath the tooltips. The arrows are themeable to match the tooltip boxes. They use polygonal CSS, following the technique we described in this article: http://www.filamentgroup.com/lab/image_free_css_tooltip_pointers_a_use_for_polygonal_css/

2. We replaced a few $ variables with “jQuery” to prevent conflicts with other libraries.

3. The tooltips are now positioned from the bottom rather from the top, so tooltips with longer text will wrap neatly above the slider handles.

You’ll need to grab the latest ui.slider.extras.css and selectToUISlider.jQuery.js to see the updates.

Comment by Scott (Filament) on 05/13  at  07:27 PM

my question is similar to the one from seady: is there a way to have a default value that is not visible to the user and only active if he has not touched the slider? I’m asking because I’m developing online surveys and there it is handsome to have values for non-answered questions.

And another suggestion: expand the current script, so that - if options set accordingly - by default no marker is visible on the scale as long as the user hasn’t clicked on it. Would be a neat implementation of a VAS (visual analog scale): any preset marker would bias answers of the user and therefore it is essential to not have any marker on the scale prior to any user action.

Comment by marc on 05/14  at  02:30 PM


Thanks a lot! It worked :)

However, i still cant make the field to change with the slide. The change only updates it on mouse release..

Any ideas?

Btw, does anyone know how to get rid of sticking effect to the handles and make them not overlap but collide?



Comment by Tair on 05/14  at  07:37 PM

First and foremost, great module.

Question: is there a special setup requirement with Select Slider with IE 7?

I have created a Drupal site that uses this module and it is fully functional using FireFox client.

I am having a problem with this module generated from my Drupal site within an IE 7 browser. It is throwing an error “Object doesn’t support this property or object” and it pertains to selectToUISlider. Code setup example:

if ( $(which) ) {

However, with the same browser IE 7, I can access and use the demo slider on this page with no problems.



Jeff in Seattle

Comment by Jeff Tanner on 05/15  at  12:08 AM

very nice tool. thx. great job.

Comment by projektowanie-stron-internetowych on 05/17  at  03:31 PM

Hi Scott, I made a change again, which I hope you’ll find interesting.
It has to do with the <optgroup> tags. I have an example with 1 date in 2006 (in optgroup with label 2006) and 5 dates in 2009 (in optgroup 2009).

Default behavior is to create to <dt>s both with 50% width.
I changed the width to
var widthPerc = (Math.min(100 - leftPerc, 100 * groups[h].options.length
/ (totalOptions-1))).toFixed(2);
such that it depends on the number of options in the optgroup.
(totalOptions is the total number of options in the select).

Furthermore, I removed the loop right after the comment “//style the dt’s”
because this only seemed to overwrite the values for ‘left’ again (I might
be wrong here...)

Greetings, Jonne.

Comment by Jonne on 05/19  at  04:42 PM

a solution for disabled option in select?

Comment by Thiago on 05/19  at  08:45 PM

congratulations for this job

Comment by Thiago on 05/19  at  08:48 PM

Hey Scott, GREAT work on the plugin! Can you also update the code to fix the “tooltip” bug when you change the slider based on the selectmenu? In that case, the tooltip is not updated.

I would also like to ask for a few enhancements;

0) I would like that the slider would fire a “sliding” event, so i can update instantly not waiting for the change event.

1) I added this CSS, since I want to control wether my label gets cut off or not.
.ui-slider span.ui-slider-label { white-space: nowrap; }

2) I added the tooltip fix suggested by “Matt Lohier on 05/11”

3) I would like to see the option that i can have my tooltip BELOW the slider. That way, it just looks nicer (horizontally) on forms when you have the slider. Ideally it would be great if you could make it so that you could choose the orientation of the tooltip (e.g. top/bottom on horizontal sliders and left/right on vertical sliders)

4) I would like to see the option that i can choose where i want to have the “optgroup” labels (e.g. top/bottom on horizontal sliders and left/right on vertical sliders). So in that case you would get: “Slider above -> Optgroup labels below -> Tooltip hovering over that” (or) Optgroup labels above -> slider -> Tooltip below something like that.

Comment by Gilles on 05/20  at  01:31 PM

p.s. on the current demo page, in the last demo, you can’t slide the “TO” part before the “FROM” part, which is good. But you can still use the “TO” selectbox to choose a date before the “from” part which screws up the slider.

Comment by Gilles on 05/20  at  01:38 PM

Hello, thank you for the script. Could you please let me know how can I style this part : http://www.grabup.com/uploads/22002213058F2009C21223166505.png . I would like to have custom image instead of default one.

Comment by Toni on 05/22  at  12:19 PM

This is great and I see many uses for it.

The only logical feature that it seemed to miss is once the end point dates are set, I was constantly grabbing the middle and trying to move the entire timeline left and right. This was logical to me.

Once I had set a range of 1 week or 1 month, there should be some Middle icon handle to move the entire range left or right while keeping the original range. Make sense?


Comment by Tri Bui on 05/23  at  08:30 AM

Great plugin, great design for the slider too.
It reminds me of the Google Analytics date range selector.

Comment by Maxime Perron Caissy on 05/25  at  02:03 AM

I’m testing it locally and had to deal with a scenario where a select list may or may not exist on a page.

In your example page, if you drop in
into the onload function, you’ll get a script error.

I fixed it by updating the script towards the bottom with the following to suppress output when the slider values are null.

if(values) {
sliderComponent.find(’.ui-slider-tooltip .ttContent’).eq(i).text( ttText(this) );
else {
sliderComponent.find(’.ui-slider-tooltip .ttContent’).eq(0).text( ttText(values) );

Comment by Dave Solomon on 05/26  at  06:09 PM

Would it be possible to allow the selection to be dragged, keeping the range size the same?

Nice though.


Comment by John on 06/04  at  02:17 PM

Is there an easy way to switch the orientation? I need mine to be vertical.

Comment by Dale Larsen on 06/04  at  06:18 PM

I’d greatly appreciate support for pressing a Reset button. Right now if you do it the forms reset but the slider does not.

Comment by Doug S. on 06/05  at  02:16 AM

Oops.  Found a bug on line 174:

var style = (i == selectOptions.length-1 || i == 0) ? ‘style="display: none;”’ : ‘’ ;

This should be:

var style = (i == selectOptions.length-1 || i == 0) ? ‘ style="display: none;”’ : ‘’ ;

It’s a tiny difference, but it makes application/xhtml+xml documents go boom. :(

Comment by Illarane on 06/05  at  01:55 PM

PLEASE Could FilamentGroup start using Google Code (or similar) for all code/plugins/elements so that suggestions, revisions, bugs, etc can be more easily tracked/contributed by us all (and acted upon by FilamentGroup) rather than having to trawl through long comment threads like this, or keep an eye out for further revisions for this article?

Comment by Marcus Tucker on 06/05  at  02:01 PM

Great plugin!

I tried to use the tooltip update from select fix that was suggested by “Matt Lohier on 05/11”, but found that if a user clicked on the select box, the tooltip would lose the stylized arrow and no longer update from the slider. 

Has anyone else found this behavior?

Comment by Jason Vail on 06/28  at  04:57 PM

Wow, pretty impressive, im bookmarking this as i can see use for it in the near future.

Comment by John on 07/05  at  07:37 PM

Impressive control but the demo doesn’t seam to support keyboard shortcuts, e.g when the slider has focus and contains values Slow, Med & Fast pressing “M” should select “Med” in the same way a drop down list would.

Comment by Brian on 07/08  at  09:51 AM

I tried this in IE8 and at first it didnt display anything.  I refreshed the page and it suddenly appeared… Im not sure if this was a glitch with the script or just a strange IE8 bug?

Comment by the website guy on 07/10  at  08:23 AM

This is great and I still can’t believe no one else has done something like this. I’m extremely frustrated though - and I know it’s not your fault - because of the confusion of which scripts to use. There are so many iterations of different libraries* (jQuery 1.2.6, 1,3+ and jQuery UI 1.5+, 1.6+, 1.7+ and finally your own plug-in versions) it is hard to find the proper mix/match that works in situ.

Unfortunately for me, I am restricted to using jQuery 1.2.6 because of various outstanding bugs in 1.3+. This in turn means I must use jQuery UI 1.6. Yet your update to jQuery UI 1.5.3 links to a page that is described as for use with jQuery UI 1.6 but in actuality seems to skip 1.6 and instead states that it requires jQuery UI 1.7.1, which in turn requires jQuery 1.3+. *slaps forehead*

It is all very confusing and probably thanks to different authors updating their code bases at different times.

It would be nice if the Filament Group updated their pages to simply showcase one slider for each combo of jQuery/jQuery UI (i.e. 1.2.6/1.6 and 1.3.2/1.7.2). Although in the end I really do appreciate you guys spending the time sharing your work with us all.

*I’m not even going to mention the pre-jQuery UI library called interface. Oops, I just did.

Comment by skube on 07/15  at  09:11 PM

@skube: sorry, we agree it’s confusing trying to make sense of the matchups of jQuery and jQuery UI versions in the past months.
I’m pretty sure the script in this article is the one you’d need: http://www.filamentgroup.com/lab/progressive_enhancement_convert_select_box_to_accessible_jquery_ui_slider/

It runs on jQuery 1.2.6 and jQuery UI 1.5.3 (which was later bugfixed and released as 1.6).
Does this help?

Comment by Scott (Filament) on 07/15  at  09:30 PM

I’ve got an interesting issue where I’m updating the value of the select box programmatically, and then triggering the change event.  The change event is firing as it should, and the sliderOptions: { change: function() is firing as expected…

However neither the select box, nor the slider itself update to reflect the value change visually.  Has anyone else run into this?  The strangest part I think is that I can do the same code in firebug and it works exactly as you’d expect.  The .val(value) changes the select box, the .change event triggers my function and the update of the slider.

Comment by Alex on 07/15  at  11:16 PM

Great work, but in a page with multiple sliders, they are all atop each other in the correct location for the last one.. Is there a fix?


Comment by Angus on 07/25  at  04:21 AM

Brilliant - great plug in!!

Comment by eggsy84 on 07/30  at  12:18 PM

Is there a way to use this plugin without using an iframe ?

When i try, it overlays my text on bottom..?

Thanks for your answer, and thank you very much for this plugin ;)

Comment by Nuranto on 08/06  at  05:52 PM

Small bug:

When having slider with tooltips, on click, tooltip appears, click somewhere on the page, tooltip dessapears, and thats ok. But when combined with select menu dropdown http://www.filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/, click on slider, tooltip appears, click on dropdown, tooltip stays visible, click somewhere on the page tooltip still stays visible! This should be fixed to hide tooltip whenever slider loose focus.

Comment by umpirsky on 08/15  at  10:24 AM

Incredible! I would give my left arm for a demo of the date range slider coupled to an event list that updates dynamically based on slider input!

Comment by توبيكات on 08/16  at  02:13 AM

I have this slider and selectmenu on my page, and suddenly it started to give me unresponsable script when firebug is enabled:

“A script on this page may be busy, or it may have stopped responding. You can stop the script now, open the script in the debugger, or let the script continue.

Script: file:///E:/dropbox/My%20Dropbox/Projects/auto-design/automobi.li/files/jquery-ui/js/jquery-1.3.2.min.js:12”

Any idea?

Comment by umpirsky on 08/20  at  04:03 PM

I have found that using the jquery-ui-1.7.1.custom.min conflicts with another jquery sortable that I have.  I’ve tried several different combinations and anytime the sortable is included, slider doesn’t slide. Has anyone else seen this?

Comment by chris on 08/20  at  09:46 PM

There seems to be a slight bug in Safari 4.0.2 under Mac OS X 10.5.7 Leopard.
The tool tip generates a horizontal scrollbar when in the extreme right.


Comment by gabssnake on 08/21  at  03:51 AM

@ gabssnake: I believe that’s just because our demo pages in this article sit inside iframes. That problem won’t likely show up in an actual page.

Comment by Scott (Filament) on 08/21  at  03:43 PM

Plain awesome, just like your other articles. Thanks so much!

Comment by Blumen on 08/23  at  02:56 AM

If your zoomed in a bit and drag it all the way to the right you get a scrollbar appearing.

I’m not convinced about the dropdowns (although maybe you need them for accessability?)

Would be nice if instead of dropdowns, the dates were shown - light text on a dark background with rounded corners.

Comment by Stu on 08/24  at  12:23 PM

i use it is script ;)

Comment by Nurettin on 08/26  at  02:18 PM

Thanks for your work.

Is it possible to make it compatible with jQuery.noconflict() mode ?
Thanks for your help.

Comment by Mqrc on 08/26  at  05:38 PM

Sorry, yes it’s compatible, forgot to replace a “$” :)

Comment by Mqrc on 08/26  at  05:55 PM

Great - really useful!

Can you set the values under the slider to match the description rather than the value?

For example; if querying a database for a price range the currency value should $ or £ below but obviously is not required for the actual value passed to the database.

Comment by jamie on 08/28  at  03:38 PM

@Jamie: Glad you like it. I believe you’re looking for the labelSrc option. From there, you can choose whether the labels are pulled from the option’s value, or its text node.

Comment by Scott (Filament) on 08/28  at  03:48 PM

Guys, here’s a workaround for “messed up positioning on window resize” bug:

The problem is that the function that calculates position does not do so again once the menus have been created:
This is the basic flow:
1) intial creation of the menu object and event binding (very top of fg-meun.js)
2) menu object invokes ShowMenu() (top of the .js file)
3) showMenu() invokes create()
4) create() invokes setPosition() as its last action

so here’s the fragment, with the workaround:

this.showMenu = function(){ //around line 120 in my modified file

menu.create(); //NEW LINE
//if (!menu.menuExists) { menu.create() } //ORIGINAL LINE

//lots more stuff


Voila.  Now the menus are created on every click and the position is correct.  No it isn’t efficient, but I can detect virtually NO performace difference between the two versions at all.  Nothing else I tried, including trapping window resize event in the html script tag, and calling the setPosition function ealier in the create method, were working. 

It’s a badass menu by the way, and I can’t hold you guys responsible for the pathetic lack of Javscript speed by IE8!

Comment by Scott W on 08/31  at  08:33 PM

Great plugin.
There is a little bug : when you change the html select, the handle is moved, but the tooltip is the same and there is no event trigger :)

Comment by ديكورات on 09/06  at  04:56 AM

I have created a Drupal site that uses this module and it is fully functional using FireFox client.

Comment by منتديات on 09/06  at  04:59 AM

Great script..congratulations..i am using it right now

I have the same problems as @alex does when changing the values of comboboxes with [removed]

“However neither the select box, nor the slider itself update to reflect the value change visually...”

Comment by convertor valutar on 09/20  at  10:50 PM

@convertor valutar:

you can trigger the sliders to change using $(’#element’).click() after updating their selectedIndex via js.

Comment by curs on 09/21  at  09:05 PM

Great script you guys put together. I will be sure to implement this in everything i do.

P.S. It works great.!

Comment by hvac on 09/22  at  01:17 PM

if in a form I have several selectionelement, such as sel1,sel2,sel3....... I want to bind sel2, and sel3 with this tools, what should I do? Thanks

Comment by yang on 09/24  at  12:38 AM

This script is beyond amazing. It absolutely works great with other plug-ins and is easy to comprehend. Usually scrips are difficult and no one understands them. Great work.

Comment by Club Penguin on 09/24  at  07:37 PM

As i can see no one on this article had anything bad to say about this script. Just like me i absolutely love the script and wish to see more projects implemented by you guys.

Comment by Dental Computer on 09/24  at  09:36 PM

I really like this script, and I am just full of ideas on how to implement into my page. I’m so glad I stumbled across this entry! Excellent work.

Comment by George Susini on 09/25  at  06:25 AM

What is the license for this object?

Comment by Ducks on 09/28  at  05:16 PM

@Ducks This plugin is dual licensed under the MIT (filamentgroup.com/examples/mit-license.txt) and GPL (filamentgroup.com/examples/gpl-license.txt) licenses. The js file in the zip has this notice, but we should probably add this to the articles too.

Comment by Todd (Filament) on 09/28  at  05:59 PM

How can I achieve to render separate slider tooltips for both selects? For me tooltip values are fetched from first select, so, no mather what is in 2nd select it always have labels that I put in 1st select.

Saša Staenković.

Comment by umpirsky on 09/29  at  08:21 AM

This plugin is great, it really saved me a ton of time.  Is there any way to give it a fixed min range?

Comment by MLatzke on 09/30  at  08:50 PM

to disable slider:

$(function() {
labels: 5,
sliderOptions: {disabled:true}

Comment by Evgeniya on 10/02  at  01:16 PM

Great plugin, it worked extremely well for me. Gonna keep checking here for updates in the future!

Comment by Read Manga Online on 10/05  at  09:52 PM

I really needed to use the slide event. After a little expermentation I change the source to ‘return sliderComponent’ at the end, rather than returning this. I was then able to

$(’#select’).selectToUISlider().bind("slide", function(event,ui) {});

of course, the hide() can no longer be chained after the call, but

$(’#select’).hide().selectToUISlider().bind("slide", function(event,ui) {});

seems fine. Any reason not to do this?

Comment by PHW on 10/06  at  12:32 PM

Anyone who knows how to make two sliders take title from separate select element, not both to take from first one?

Comment by umpirsky on 10/06  at  01:03 PM

Jquery really has changed the way I go about working on the web.  It can pretty much accomplish anything flash can do and then some!


Comment by affordable websites on 10/09  at  10:49 PM

Really thanks ! It’s really a very good work !

But… I can’t change my “select” to a “slider” when i click on a button or a link [url="#">. I have this error (firebug) :

second argument to Function.prototype.apply must be an array
+ Array.prototype.push.apply( this, elems ); --> jquery-1.3.2.js (ligne 146)

Here is the source of my HTML file :
<a id="TimelineTransform" ]click here[/url]
<div id="timeline">
<select name="Timeline" id="Timeline">
<option value="2004" selected="selected">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>

And my script :
$(document).ready( function () {
$(’a#TimelineTransform’).click( function() {
$(’#Timeline’).selectToUISlider( {’tooltip’ : false} ).hide();

If you want you can replace :

$(’a#TimelineTransform’).click( function() {
$(’#Timeline’).selectToUISlider( {’tooltip’ : false} ).hide();


setTimeout( function() {
$(’#Timeline’).selectToUISlider( {’tooltip’ : false} ).hide();
}, 2000);

The result is the same : the select doesn’t dissapear and the error appear.

Really thanks for your help :’( !

Comment by Myrdhin on 10/13  at  03:59 PM

About my problem, we perhaps resolve it by replace the “selectToUISlider” source code, line 226 :

var values = sliderComponent.slider(’values’);

by :

var values;
if (sliderOptions.range) { values = sliderComponent.slider(’values’); }
else { values = sliderComponent.slider(’value’); }

It seems to work for me… Perhaps do you have a better idea ?
Thanks for your help.

Comment by Myrdhin on 10/13  at  04:26 PM

Good post Myrdihin. You are the MAN!!!

I can resolve my problem because you.

Comment by Tom on 10/18  at  09:30 PM

Excellent plugin..the best JS slider available!

One question..is there anyway I can restrict the user to scroll till some value only.. For example I have a slider with value 1 to 100 but the user will be able to move between 25 and 75 only.. other area is disabled with some light read color or something.. I tried making the options disabled="disabled" in the select. but still the slider can be used to select the values.

Comment by Anz on 10/19  at  08:32 AM

I’ve tried and tried.  I keep getting this error:

obj is undefined
selectToUISlider.jQuery.js (line 71)

- jQuery 1.3.2
- UI 1.7.2 (with all components)

Could anyone make a suggestion?


Comment by dyerrington on 10/22  at  06:03 AM

I am trying to capture the of the select box onChange event to use it without submitting the page but am unable to please suggest.

Comment by upendra on 10/23  at  01:45 PM

I’m having the same problem as Angus - multiple sliders on a page conflict with each other. Is there a way to fix this?

Comment by Murphy on 10/27  at  10:53 PM

Fortunately, I answered my own question: Conflicting ID’s on the selects were the culprit.

Awesome work guys.

Comment by Murphy on 10/27  at  11:13 PM

Angus, Murphy:

I’m not sure if this is the best way to do it, but here’s how I had multiple sliders on one page:

var sliders = $(’select.slider’);

for (var i = 0; i < sliders.length; i++) {
$(’#’ + sliders.eq(i).attr(’id’)).selectToUISlider().hide();

Each slider has it’s own unique ID.

Comment by MLatzke on 10/28  at  01:33 AM

I am trying to capture the of the select box onChange event to use it without submitting the page but am unable to please suggest.
for multiple sliders use this, have tested and working

var abc = $(’select#speed’).selectToUISlider().next();

var abd = $(’select#speed1’).selectToUISlider().next();

Comment by upendra on 10/28  at  11:37 AM

Nice stuf guys

Comment by moi on 10/29  at  11:23 AM

Anyone know how to get the slider to fire the select onChange event? Or how to get the new value of the select box without a form submit?

Comment by BassFace on 11/01  at  08:53 PM

that is really good blog thanks for info

Comment by Auto Club on 11/04  at  01:24 AM

congratulation for the great work.

how can i make the tooltip always visible? even in the beginin (when a select option is selected by default)?


Comment by gabro on 11/04  at  11:37 AM

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

Comment by Biology Degree on 11/04  at  11:37 PM

how can i make the tooltip always visible even if a lose focus?


Comment by gabro on 11/05  at  01:32 PM

“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.”

Thanks, I’m really glad you guys did this, as I’ve been trying to make my site more accessible.

Comment by black nightstands on 11/06  at  04:44 AM

How can we know when new version is released?

Comment by umpirsky on 11/06  at  09:55 AM

Where can I download plugin?

Comment by ecommerce website development on 11/06  at  04:00 PM

One question I have to restrict users to scroll up and some only .. like I have a slider with a value of 1 to 100, but users can move between 25 and 75 only .. other areas are clear with light colors. or read something .. I try to make the option disabled = “disabled” in the selection. but it can also scroll to select values.

Comment by proxy sites on 11/16  at  08:29 AM

how can change size of created slider???

Comment by pankaj on 11/16  at  12:20 PM

@pankaj CSS style of slider wrapper.

Comment by umpirsky on 11/16  at  12:27 PM

Excellent technique.  I love jquery more and more every day.

Comment by Las Vegas Escorts on 11/20  at  12:32 AM

Wow jquery really is incredible.  Thanks for sharing this tut.

Comment by digital luggage scale on 11/20  at  07:23 PM

Thank you , its useful

babak zawari
بابک زواری
بابك زواري

Comment by babak on 11/21  at  10:49 AM

I thank you for this informative article. I follow your vendors. It’s verry good.I wish you continued success

Comment by Adum on 11/23  at  11:40 PM

Thanks for your work. It works perfectly in IE8 plugin

Comment by australien on 11/29  at  08:17 PM

filamentgroup rocks...i love your script guys!

Comment by curs bnr on 11/29  at  09:06 PM

Hi ! Thx for the script, very good !
Is-it possible to fix some no-selectables values, to disabled some elements of a simple slider (no range) ?
Thanks a lot,

Comment by Manu T on 11/30  at  05:54 PM

thats is good post keep it up thanks for this :)

Comment by birthday sms on 11/30  at  08:34 PM

Nice script. Thank you very much.

Comment by WG Jena on 12/02  at  02:38 PM

Is there a way to avoid this from happening when the slider is close to right side of the page
or as in your example the frame


Comment by Daniel Langras on 12/09  at  08:50 PM

Deligated script but please give me the suggestion some times JQuery not executed on vista platform.

Comment by make affiliate program on 12/10  at  12:16 AM

How can i resolve the issue on Win32 in my JQuery scripts

Comment by network+ on 12/13  at  02:28 PM

All scripts are working but resolve this issue of Win pro.

Comment by a+ certification on 12/13  at  02:29 PM

How do you mean not execute on vista?

Comment by umpirsky on 12/13  at  04:15 PM


I’m having the same issue as Dave:

obj is undefined
selectToUISlider.jQuery.js (line 71)
- jQuery 1.3.2
- UI 1.7.2 (with all components)

Do I need to wait for you to release a new version?

Comment by Matt on 12/17  at  01:54 PM

I’ve solved my issue now, I was calling $(’select.slider’).selectToUISlider().hide() in my application js, which is called on every page.  On pages where there were no selects it was causing the js error in my previous comment.  The fix was:

$(’select.slider’).each(function() {

Comment by Matt on 12/17  at  03:11 PM

How can I make a slider for values 1$ to 100000$? I have to have 100000 < option > ? Is there other way to do this?

Comment by Michael on 12/17  at  09:18 PM

@Michael: in that case you’d probably want to start with an input element instead of a select. You could use the HTML5 input type="number" and provide a min and max attributes to use for generating your UI slider. We’ll post an article sometime in the near future with an example of this technique.

Comment by Scott (Filament) on 12/17  at  09:22 PM

Ok, but I have to modify selectToUISlider.jQuery.js file because its only support select element?

Comment by Michael on 12/17  at  09:52 PM

Hi, great slider! I didn’t see an answer to this in the comments-
-is there anyway to make it continuous instead of rewinding back to the start? so f.e. 1,2,3,4,1,2… instead of passing by 3,2,1 to go back to slide 1.

Read more: http://www.dreamcss.com/2009/04/create-beautiful-jquery-sliders.html#ixzz0aQGGr6KX

Comment by TheWebLeap on 12/22  at  04:07 PM

Is there any way to modify the slider so you can grab it by the range bar (ui-slider-range) and slide both handles simultaneously?

Comment by Chris on 12/28  at  08:42 PM

Has there been an article released about how to make an “input type = number”? Like Michael, I need an slider for large range of values such as 1-10000 and making <option>s for all these is not an option :D

Any help is welcome!

@Michael: in that case you’d probably want to start with an input element instead of a select. You could use the HTML5 input type="number" and provide a min and max attributes to use for generating your UI slider. We’ll post an article sometime in the near future with an example of this technique.

Comment by Songe on 01/02  at  08:29 PM

@Songe: As soon as we can, we plan to post an article on this technique, yes.

Comment by Scott (Filament) on 01/02  at  08:58 PM

How do I change the slider programmatically?

I tried: $(myslider).selectToUISlider({ ‘sliderOptions’: { ‘values’: [’09:30’,’10:30’]}});

But that just creates an extra slider. Any ideas?

Comment by Hackeron on 01/04  at  05:12 AM


Comment by منتديات on 01/05  at  07:00 AM

Hey Scott, beautiful work.  I noted a small shortcoming though and remedied it.

While it’s not 1/1000th as elegant as your solution to the problem would probably would be, I’ve been able to add another option to the .selectToUISlider options array (along w/ needed modifications to CSS), called “tooltipLocation”, allowing the user to specify the vertical orientation to the slider tooltip.

If you have a horizontal slider, placing the tooltip above the slider may not work w/ a given page.  The default configuration of my modified script display the tooltip above the slider, but {tooltipLocation: “below"} does all the lifting to change the placement.

While I’m sure you could code it in 10 seconds, if you’d like the modified code, please drop me a line.

Thanks for the awesome work…

Comment by Daniel on 01/07  at  10:00 PM

I have one SELECT element turning into a horizontal slider via selectToUISlider.

I know the instructions above warn to not override sliderOptions’ range, but I want the slider to have a different color on each side of the thumb (accomplished with either a range: “min” or range: “max”, if this were a plain ol’ jqueryui slider).

Looking at the code, it seems that range is set to true or false (depending on the quantity of sliders). So, I don’t think range: “min” would break anything for one SELECT element.

Setting range: “min” renders the expected DIV class="ui-slider-range ui-slider-range-min ui-widget-header”, but the width does not change (from 0).

I cannot get the desired behavior, any suggestions?

I also tried using JS to build a second fake SELECT element and rendering the pair via selectToUISlider to create the range, but then I could not figure out how to disable the “fake” thumb so only the real thumb would accept events (and I can’t help but feel that approach is a little convoluted).

Comment by Adam Hutton on 01/15  at  08:25 PM

@Adam: Interesting problem. I gave it a little investigation and couldn’t immediately see why the range: min doesn’t seem to work as expected. It may have to do with the handle we’re generating before creating the slider. An improved implementation would create the slider first, then find the anchor inside it to apply ARIA.
We may have some time later this week to take a look. Let us know if you figure out the conflict. Thanks!

Comment by Scott (Filament) on 01/17  at  05:14 PM

Very simple and useful thank you.

Comment by Campervan Hire Australia on 01/19  at  07:56 AM

@Scott: I think I’ve made some progress. The jQuery UI slider() can take value:int or values:array, but range:"min" only works with value:int.

$(’#someDiv’).slider({range:"min", min:0, max:10, value:3}) works.
$(’#someDiv’).slider({range:"min", min:0, max:10, values:[3]}) does not work.

At this point, I would consider that a bug in jQuery UI, but it can be accounted for without too much work (I hope) in selectToUISlider.

Comment by Adam Hutton on 01/19  at  11:41 PM

Nice. I was waiting a few months for them to start supporting it fully. Great news!

Comment by Sweet irena on 01/23  at  12:45 AM

If using this with a framework that needs dots in the id for naming the objects, this will not work because it will not escape the dot. So I changed the source to these:
tempArr.push(’handle_’+jQuery(this).attr(’id’).replace(".", “\\."));
var thisHandle = jQuery(’#handle_’+ jQuery(this).attr(’id’).replace(".", “\\."));

and it works now.

Comment by Alex on 01/26  at  05:33 PM

Thats really very good work, thank you for sharing! Simple but very usefull…

Comment by Bilderdienste on 01/27  at  12:43 AM

Is there a way to hide the dropdownlist and only display the slider?

Comment by dotnetster on 01/28  at  12:22 AM

Nice and easy… they have a little gray block of code above that shows how:


Just put the .hide() after the selectToUISlider call and you’re done!

Comment by Daniel on 01/28  at  12:39 AM

How do u include it inside jquery tabs ?

i m trying to include it in a ajax loaded tab and its not working.

it works in its own but not inside the tabs.

any idea how to fix this ?


Comment by ihab on 01/30  at  09:24 PM

Looks like change handler is triggered multiple time during the slide, before releasing mouse button. On click it’s triggered twice.

That was not the case before jQuery UI 1.8.

$("#year, #year2").selectToUISlider({"sliderOptions”:{"change”:myfunc},"labels":5});


Comment by umpirsky on 02/02  at  06:00 PM

Here’s my question/situation:

I am using this to place sliders on a questionnaire. The people running the questionnaire want the labels to appear a specific way. They want the value to appear as part of the label, but ABOVE the label text.

For example, if the value is 7 and the label text is STRONG, they want the number 7 to appear above the word STRONG, just as if it were coded 7

Is there any way to do this?

Comment by Patrick Moore on 02/02  at  06:20 PM

Nice stuf guys, filament group rocks!

Comment by Blumen bestellen on 02/03  at  11:20 PM

I have added

onchange = “this.form.submit();”

to the select tag in the HTML. It works great whenever I use the dropdown to change my selection but it is not recognized when I use the slider, even though the dropdown changes as I slide. Any ideas how to make it autosubmit after I edit the slider?

Comment by Sam on 02/11  at  08:06 PM

Hello and thx for this nice plugin. I made a simple patch for putting a simple class on the handlers so can distinguish the left from the right or whether it is a single one. Are you interested in getting it? How can I send it to you (a “social coding” site would be nice, as for example google code, github, etc....)

Comment by Nikos Dimitrakopoulos on 02/12  at  11:05 AM

Is there any way I can make the tooltip visible as default? I want it to show up as soon as the slider is loaded and not disappear once my mouse unfocuses.
I’ve spent the better half of this morning and two cups of coffee trying to find it but haven’t had any luck!!!

Also still need help with the onchange function.

Have a BEAUTIFUL implementation of this code I’d be happy to share with the developers once I’m 100% running. Donations will rain!!

Comment by Sam on 02/12  at  06:44 PM

Anyone having problem using this with JQuery 1.4.1 and JQueryUI 1.7 or do I have to use UI 1.8 with 1.4?


Comment by Chris on 02/13  at  08:13 PM

@ Chris I use UI 1.8 with 1.4.

Comment by umpirsky on 02/14  at  01:05 PM

That doesnt work for me?  Getting contructor is null or not an object in the isArray function?  Using IE8

Comment by Chris on 02/15  at  04:30 PM

I really like how you guys put this slider together! I’m still having some trouble playing around with tweaking some of the visual layout of the slider, but overall, it’s really nicely done.  Thanks Filament team; will be looking forward to updates.

Comment by NV Web Design on 02/17  at  12:01 AM

Hi, Can anyone tell me how to use ARIA support ? and what if i don’t want to use select control to populate the slider?

Comment by ntimesc on 02/19  at  10:15 AM

Is it possible to give each select option a different background color on the slider? If yes, How can I do that?

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

I also like the feature to show the tooltip all the time.

Comment by Gerben van Erkelens on 02/23  at  05:41 PM

Can someone explain how I can show the tooltip on initial rendering of the slider control?  Say the default value is 5 on a scale of 1 to 10.  I can get the slider handle to default to 5 but I would like to show the tooltip at 5.  Thanks.  Keep up the good work.

Comment by dotnetster on 03/01  at  04:57 PM

@sam @Gerben I changed display: none; to display: block; in the ui.slider.extras.css to show tooltips always

@sam any luck to show toolip onload/render of slider?

Comment by dotnetster on 03/01  at  06:13 PM


I’ve just upgraded to jQuery 1.4 and JQ UI 1.8rc3 and this seems to have broken an accessible slider I’m using.  Do I need to change anything to get this to work?  Anyone else having problems/success?


Comment by Rick on 03/02  at  06:12 PM

which display: none did you change? There are a lot of them in that CSS file.

Comment by Gerben van Erkelens on 03/02  at  06:23 PM


for any class using ui-slider-tooltip

Comment by dotnetster on 03/02  at  08:13 PM

@dotnetster I tried the display:block but the tooltip still does not appear as soon as the slider is loaded.

Also, I’ve had no luck getting the onchange event to fire.

Comment by sam on 03/02  at  08:18 PM

I’m getting the tooltip now, but it stand below of the sliderbar instead of above. And the layout of the tooltip is entirely different

Comment by Gerben van Erkelens on 03/02  at  09:28 PM

Nice plugin! it saved me a lot of trouble when I needed slider with zend_form.

Comment by dr Casper Black on 03/06  at  01:18 AM

@Casper I use if with Zend_Form too, extended ZendX_JQuery_Form_Element_UiWidget ;)

Comment by umpirsky on 03/06  at  11:30 AM

I’m using 4 range selectors and it is taking the page around 5 seconds to render the js in IE(7&8;). Is this expected from this plugin or is there something I should be looking for to correct this?

Comment by Matt on 03/17  at  05:37 PM

Amazing plugin, great work. Never any reason to not use this when using the JQuery UI Slider. Needs to be merged into the official Slider right away…

Comment by Scott Hovestadt on 03/26  at  02:04 AM

Thank you for this useful article. I really struggle with jQuery.

Comment by digital luggage scales on 03/29  at  12:03 PM

Is it possible to have the slider moving according to each value, so the steps will be placed in different distances between them?
If my drop down has values 1, 10, 60, 80, 200 I would expect the distance between steps 80 and 200 to be larger than the one between steps 60 and 80.

Not sure this question was already asked.

Comment by igasparetto on 04/07  at  12:57 PM

it’s very good , i love it. by the way,
please let me post a link.......you know that,thank you very much

Comment by 婚紗攝影 on 04/07  at  07:53 PM

I managed to get the tooltips visible by default. However I would like to autosubmit the slider when a person makes changes on the slider. The onchange / onmouseup events won’t work. Anybody got an idea?

Comment by Gerben van Erkelens on 04/08  at  11:39 AM

I think this is what you need

labels: 2,
labelSrc: ‘text’,
tooltip: true,
sliderOptions: {
animate: true,
change: function(event) {

function doSubmitMyStuff(){
// add your code here

Comment by igasparetto on 04/08  at  12:23 PM

Where do I add the code you give me? In the javascript file or in the html where the select box code is located? I don’t quit get it right now.

Comment by Gerben van Erkelens on 04/08  at  12:49 PM

Well, first of all you should keep your JS and your HTML in separated files and use event listeners to attach whatever JS you need to the HTML. So it doesn’t matter where you put the code.
However, to help you understanding a bit more the code:
myElementId should be replaced with your select box ID
change happens after the select box value changes, so we than call the function doSubmitMyStuff, in which you should add the code to submit your values.

I hope this help

Comment by igasparetto on 04/08  at  01:09 PM

For testing purposes I put the code inside the head section and provided the proper id. But when I move the slider an alert should trigger, however that doesn’t happen. Any idea’s?

Comment by Gerben van Erkelens on 04/08  at  02:29 PM

Okay, I added on line 98 of the js file

Now the onchange function works, but I really need it to fire at onmouseup. Any idea’s to get that working?

Comment by Gerben van Erkelens on 04/08  at  04:59 PM

Okay ingore my last post. The sliders doesn’t work smoothly anymore then. So I’m back at looking for something to auto submit the form.

Comment by Gerben van Erkelens on 04/08  at  05:06 PM

my dropdown select boxes are hidden as standard. I got no code what so ever in the head section like:

Is that a bug or what is it?

Comment by Gerben van Erkelens on 04/09  at  05:49 PM

I have 14 sliders on a page used to set work schedules for a particular employee for a two-week period.  Each slider is a range from 12:00 AM to 11:59 PM for each day.  It works great in FireFox but the load time is absolutely horrible in IE8.  Even the demos on this site are a bit slow in IE8.  I’ve tried using jQuery 1.4.2 and UI 1.8 hoping they had worked around some of the memory leaks in IE but it breaks the slider.  Has anyone experienced this in IE8?  Doesn’t anyone have it working with the latest libraries?  Anyone have the tooltips showing on load?

Comment by Chad Boettcher on 04/12  at  05:17 AM

@Chad Boettcher I’m using latest libs, 5 sliders worked ok in IE8.

Comment by umpirsky on 04/12  at  10:52 AM

Hi there,

Back again. I managed to located the code which I realier stated I didn’t have. Turns out I’m blind as a mole. The code was there. However when trying the code below the change event doesn’t get triggered. Any idea on how to get this thing working? A mouseup event would even nice if that’s possible.

labels: 2,
labelSrc: ‘text’,
tooltip: true,
sliderOptions: {
animate: true,
change: function(event) {
function doSubmitMyStuff(){
alert ("And then there was a change");

Comment by Gerben van Erkelens on 04/13  at  11:46 AM


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?


Comment by suresh on 04/16  at  01:17 PM

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.

Any chance of that making in as an optional configuration?

Comment by Kevin Neufeld on 04/20  at  01:19 AM

Big thx very Brilliant and great plug in!!


Comment by Favoriten on 04/22  at  02:55 PM

Great plugin!

I have found a way to fix the tooltip update issue.
A solution was suggested by “Matt Lohier” but it still had some problem. (See comment from “Jason Vail on 06/28 at 09:57 AM”

Here the solution that is working for me:

//select element change event
selects.bind(’change keyup click’, function(){
var thisIndex = jQuery(this).get(0).selectedIndex;
var thisHandle = jQuery(’#handle_’+ jQuery(this).attr(’id’));
var handleIndex = thisHandle.data(’handleNum’);
thisHandle.parents(’.ui-slider:eq(0)’).slider("values", handleIndex, thisIndex);

// Update the tooltip
var textval = ttText(thisIndex);
.attr(’aria-valuetext’, textval)
.attr(’aria-valuenow’, thisIndex)
.find(’.ui-slider-tooltip .ttContent’).text(textval);

Comment by Fab on 04/27  at  01:57 AM


I am using the date range slider and it works fine. I want to disable the options in the “TO” field based on the “FROM” date selection. “TO” date should allow the user to select the value more than the selected value of “FROM” date. Can anyone help me how to do this ?

Thanks in advance.

Comment by Murugesan on 04/28  at  04:59 PM

Hi there, i have some troubleshooting. I try this solution;
sliderOptions: {
stop: function(e,ui) {
but after that my slider disappeared. Any help?
jquery-1.3.2; iquery-ui-1.7.1

Comment by Peter on 05/02  at  03:27 PM

Very nice plugin. Good work all.  If anyone’s interested, here are a couple of patches that I had to make for a couple a bugs I came across for version 2.0

1. Bug: IE 7 and 8 don’t display the option labels (they do display the option group labels, thou)

Fix: (line 46) change references from
text: jQuery(this).text()
text: jQuery(this).attr(’label’)

And again on line 61
groupedData.options.push({text: jQuery(this).text(), value: jQuery(this).attr(’value’)});
groupedData.options.push({text: jQuery(this).attr(’label’), value: jQuery(this).attr(’value’)});

And of course populate the select lists using ‘value’ and ‘label’, not ‘value’ and ‘text’ for this to work.

2. Bug: Group option labels are even distributed along the slider, not proportional to the number of options in a particular group.

Thanx to Jonne who posted on 5/19 for this!  Here’s the whole section that works:

//write dl if there are optgroups
if(groups) {
var inc = 0;
var scale = sliderComponent.append(’<dl class="ui-slider-scale ui-helper-reset” role="presentation"></dl>’).find(’.ui-slider-scale:eq(0)’);
var leftPerc = 0;
var widthPerc = (100 * groups[h].options.length / (selectOptions.length-1)).toFixed(2);
scale.append(’<dt style="width: ‘+ widthPerc +’%’ +’; left:’+ leftPerc +’%’ +’"><span>’+this.label+’</span></dt>’);//class name becomes camelCased label
var groupOpts = this.options;
var style = (inc == selectOptions.length-1 || inc == 0) ? ‘style="display: none;”’ : ‘’ ;
var labelText = (options.labelSrc == ‘text’) ? groupOpts.text : groupOpts.value;
scale.append(’<dd style="left:’+ leftVal(inc) +’"><span class="ui-slider-label">’+ labelText +’</span><span class="ui-slider-tic ui-widget-content“‘+ style +’></span></dd>’);
leftPerc += parseInt(widthPerc);

Also, remove the section commented by “style the dt’s”.  This just seems to destroy the layout of the labels.
//sliderComponent.find(’.ui-slider-scale dt’).each(function(i){
// jQuery(this).css({
// ‘left’: ((100 /( groups.length))*i).toFixed(2) + ‘%’
// });

Now all we need is a feature enhancement that allows one to select the range itself.  Then we’d have an even better plugin :)

Comment by Kevin Neufeld on 05/12  at  05:47 PM


Comment by asanka on 05/20  at  01:13 PM

The slider is not working well with JQueryUI 1.8.1 in the Opera browser.  The labels are not well aligned and the mouse drag does not work.  Does anyone have a port for JQueryUI 1.8.1? 

Comment by don on 05/21  at  06:28 PM

great. let me try it on my personal project

Comment by neosheet on 06/02  at  08:26 AM

Great additions guys - this is working well within a project of mine, any ideas on getting mulitple slider handles, e.g. to choose boundaries x to y, y to z?

Comment by Woody on 06/03  at  03:21 PM

Woody, this plugin extends the jQuery UI slider, which allows either one or two handles.  If you call it on two selects, it’ll make a range slider with two handles, but for more than that, it’d require enhancements to UI’s slider widget itself.

Comment by Scott (Filament) on 06/03  at  03:37 PM

The code below works perfectly in firefox, but I can’t get the slider to appear in IE 7. When it tries to show the slider, I get the exception: Error-invalid argument. Any ideas?

select = $(’.slider_value_field’, newSliderRow);


// Checks if the value is new.

// Performs actions associated with a default values.

Comment by Bec on 06/08  at  04:56 PM

I think there is a bug in selectToUISlider.jQuery.js line 193; the line where you calculate wich options should be showed does a miscalculation when for example labels = 3 and there are 7 options. math.round(7 / 3) = 2, so the script will display the values on position 0, 2, 4 and 6, while it should be on 0, 3 and 6. If you change the script to

var increm = Math.max(1, Math.round((selectOptions.length - 1) / (options.labels - 1)));

it seems to be fixed.

Comment by Kenneth on 06/08  at  05:44 PM

I resolved my issue above. FYI...The problem on IE 7 was that I was trying to create the slider on a hidden row. I could only create it after the row was shown.

Comment by Bec on 06/08  at  11:19 PM


I guess its not that difficult, but I just dont see the solution:

I want to get a min range between the two dates, for example 1 step.
Any idea how to achieve this?


Comment by Sithlord on 06/14  at  12:48 AM

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  03:11 PM


Firstly, I want to thank you for your good work, I appreciate it.

Secondly, I have a question that may have occupied some of the users of your slider:
How can I obtain the changed values of the select-elements AFTER a page reload (in order to use these new values with PHP as parameters for a function...).

Thank you for you advice

Comment by Julian on 06/20  at  03:05 PM

I have found this slider being used in wordpress themes by themeforest also. Its indeed very good style !

Comment by Baba on 06/21  at  08:04 PM

This slider module breaks in jQuery UI 1.7.3 on “selectOptions[optIndex].text” :

FireBug error reports: “selectOptions[optIndex].text is undefined”

Which is in:

function ttText(optIndex){
return (options.tooltipSrc == ‘text’) ? selectOptions[optIndex].text : selectOptions[optIndex].value;

But works fine in jQuery UI 1.7.1—what happened in two minor versions later?

Comment by Morningtime on 07/01  at  09:16 PM

Ok my previous comment is not related to this module, different bug.

But a question: this slider is “dichotomous”, e.g. it accepts steps based on the select values. How to build a “continuous” slider? A slider that has only a min and max, and calculates values in between based on the position of the slider? I’ve seen Yahoo YUI do this with their slider. The value is based on the pixel/screen position of the sliders. So instead of:

1-2-3-4, possible values are: 1,2,3,4 (dichotomous)

You would have:

1 ----- 4 , possible values are: 1.222, 2.5, 2.344, 3,222, 3,993 etc etc (continuous values)

Comment by Morningtime on 07/01  at  11:08 PM

@Morningtime: We plan to release a different version of this slider plugin very soon that will address the issues you’re seeing.

As for your second question, for sliders that can represent a broad range of incremented values, we recommend generating the slider from an input element (type="number") instead of a select. That way, you can use HTML5 attributes min, max, and value to pass all of the configuration data the slider needs. The slider example from our book creates sliders from both inputs and selects, so it accommodates this situation very well. Look for it soon!

Comment by Scott (Filament) on 07/02  at  04:16 PM

Hi is there anyway i can make the tooltips on this fine plughin fadeIn/Out

Comment by Daring Dave on 07/02  at  09:29 PM

I believe woothemes uses this slider in their themes. Works perfect.. fantastic.

Comment by matt on 07/04  at  02:51 PM

Hi, first of all, i’m sorry for my poor english.....

i use the selectToUIslider for my web page and i have some speed problem with internet explorer.

i have 6 slider and explorer it’s too slow to load the page (with only 1 slider you don’t see the problem so try with many slider).

The parte of script that have problem is this:

jQuery(this).css(’marginLeft’, -jQuery(this).width()/2);

the “each” function is fast 1 time, but it’s became too slow if it’s use for all elements of select.

i resolve the problem, using “visible” after “ .find(’.ui-slider-label” , you can see the solution here.

//inject and return
jQuery(this).css(’marginLeft’, -jQuery(this).width()/2);

Comment by stefano on 07/08  at  12:02 PM

This is very nice plugin.

I have question.

I created disabled slider the following code
$(’select#valueA1, select#valueB1’).selectToUISlider({
sliderOptions: {disabled:true}

how can I enable again this slider?
I want to enable slider as click the enable button.


Comment by uta on 07/10  at  07:21 AM


nice one.
But initialization time is way to long! With two select boxes I’m at about 200ms! For me a nogo.
And its possible to select a range from Jan 06 till Jan 06, which (in my opinion) should not be possible or at least possible to deactivate.


ps: I really do like this sliding textarea! Dont know where I saw it first, but...Such an easy thing, but...brilliant! :)

Comment by beq on 07/10  at  02:53 PM


Nice plug in. iam using range slider with two thumbs. I need to maintain the range shouldn’t exceed some value like 45, where as my min is 0 and max is 300,
Consider a scenario, my handle 1is in 0 i try to drag handle 2 to 100 then my handle 1 needs to automatically update to 55. that is range shouldn’t exceed 45. Can anyone help me for this.

Thanks & Regards,


Comment by sera on 07/14  at  03:51 PM


Nice plugin. iam using range with two thumb slider for my application. I need to know is there any way to maintain an specific range. if suppose i want to maintain the range shouldnot exceeds 75 where as my min 0 and max is 300. when i load the handle 1 in 0 and handle 2 is at 75. when i drag my handle 2 to 100 then hadle 1 should automatically move to 25. the range should maintain not more then 75. or else my slider should not allow to drag more then that. Is any suggestion regards this.

Thanks & Regards,


Comment by sera on 07/14  at  04:01 PM


I was posted my query. i not yet get any suggestion or ideas for my scenario. can any one help me to get this issue fix.


Comment by sera on 07/15  at  07:04 AM


This is a great slider control.  The ability to have tooltips and dual range from select lists is pretty amazing.  The one thing that seems to be missing from the discussion, however, is how to programatically set the slider.  I can think of a number of situations where an option or interaction elsewhere would change a slider value.

Either way, keep up the good work.

Comment by Eric on 07/19  at  05:44 AM

Sorry for the double post, but I hit submit too soon.  A decent way (at least IMHO) to programatically set the value of other sliders is to set the value of the select list, then trigger a change event.  Something like (psuedo code) ...

$( ‘#OtherSelect2, #OtherSelect3).val( targetValForOtherSelects).trigger(’change’);

Hope that helps someone.

Comment by Eric on 07/19  at  05:56 AM

Hi Eric,
You should be able to do this from either direction. Once the slider is created, you can find it through $(’#myselect’).next(); and call native jQuery UI slider methods on it. For example, you could set its value by index like this: $(’#myselect’).next().slider(’value’,2); . And that should trigger the necessary events to update the select as well.

Comment by Scott (Filament) on 07/19  at  03:56 PM

Hi Dave here lol

I was just wondering does anyone know how i can make the tooltip fade in and out when you hover over the slide

Comment by Daring Dave on 07/19  at  04:00 PM

Hi Scott & Eric,

Thanks for your response. let me check with your ideas and will back

Thanks again


Comment by sera on 07/19  at  04:09 PM

Ok thanks ive got notify on reply on so will know when u get back to me
Thanks Again

Comment by Daring Dave on 07/19  at  04:10 PM

Hey, I found a bug in your plugin. It arises from the same use of sliderComponent on line 121.

With it, a $(".slider").each(function(){ $(this).selectToUISlider(...)}); will work fine, whereas $(".slider").selectToUISlider(..) breaks, assuming multiple elements match .slider

I don’t know if there is a better way to submit this, so I am putting it here =)

Joel McCracken

Comment by Joel McCracken on 07/19  at  08:13 PM

Greetings from germany

Comment by Spendenkonto on 07/23  at  04:46 PM

I juste want to select an option in $(document).ready(function(){}.
What should I do? Something like $( ‘select#valueA’ ).slider({ ????????});

Comment by nadia on 07/23  at  07:43 PM

Is it possible to disable the mouse middle-click/scroll-click when I click on the scroller icon?  When I left-click and drag, it works fine.  But when I middle-click, it opens up the same page in a new window/tab.

Comment by Darren on 07/30  at  12:53 PM

Great work guys! I was searching for a slider like that to improve the UI on my page where users need to select several numerical ranges for the search machine. But on my page I dont want to have selects, only sliders. So I would like to hide them after sliders are drawn.

But then I need sliders to ALWAYS SHOW tooltips. Or use labels instead of tooltips, which always hover over the handles.

How do I do that? I could not find a way to hack into the jQuery UI labrary yet to set it right…

Any ideas please?

Comment by Konstantin on 08/03  at  11:54 AM

Found it! In order to make tooltips be always visible, you need to replace in CSS this:

.ui-slider .ui-slider-tooltip {display: none;}

with this:

.ui-slider .ui-slider-tooltip {bottom:2.5em;display:block;font-size:0.9em;margin-left:-3.7em;padding:0.3em 0.2em 0.4em;position:absolute;text-align:center;width:8em;}

Comment by Konstantin on 08/03  at  02:33 PM

How to set value to selectUIslider???

Comment by hidaet on 08/06  at  12:26 PM


Comment by yasamphani on 08/12  at  07:31 AM

How do I avoid sliders from overlap?

Comment by Gopi on 08/13  at  10:45 AM

good code thanx

Comment by tokat nakliyat on 08/18  at  03:07 PM

Thanks a lot for releasing this, it’s great.
I have one question, though.
I am trying to plug this into an existing application where I have two select inputs, and it works great when loading the page. However, the way my page works, the original select input are updated (that is, the list of their options is changed dynamically). I would like to somehow have the slider reflect that, but I don’t know how to tell the slider it should reload the options.
Can anyone point me to the right direction for this?

Also, I will need to enforce rules on the slider (eg: the two sliders can not be farther than X divisions apart). How should I go about doing that?



Comment by Mikael on 08/19  at  10:40 PM

Great Blog! Will visit again

Comment by Garage Remote Control on 08/22  at  12:22 PM

Thank you for the information, keep up the good work

Comment by Roller Shutter Control on 08/22  at  12:23 PM

Excellent post, thanks.

Comment by Garage Door on 08/22  at  12:24 PM

Just the information I was looking for, thank you

Comment by GSM Remote Control on 08/22  at  12:24 PM

Very interesting, will visit again

Comment by Gate Remote Control on 08/22  at  12:25 PM

Would be wonderful if instead of using <select>, an <input type="text"> for the min and then for the max date would be used.

Comment by Matt on 08/23  at  06:19 PM

I think it would be really neat if there were a way to apply style to the individual blocks based on style attributes within the select.

For example:
<option style=’background-color: green;’ value=’10’>10</option>
<option style=’background-color: yellow;’ value=’20’>20</option>
<option style=’background-color: red;’ value=’30’>30</option>

Comment by Michael on 08/23  at  07:35 PM

Date Picker + input type="text" + slider
is what I was hoping for in the Comment post on 08/23 at 11:19 AM.

In the jquery forum, kbwood (Keith Wood) has coded how this
can be accomplished. I hope he provides an article
about it.


It’s speed is rather slow in IE, but nonetheless: very impressive.
Working example on jsbin: 


Comment by Matt on 08/27  at  01:53 AM

Hi, this is exactly the plugin I was looking for! Thanks so much!

How can I move the slider handle programmatically using a play/pause button and a setTimeout, so that it behaves like timeline moving to the next tick every two or three seconds (and triggering of course the change event).

See the url for an example what I want, except that it doesn’t work as I wish.

I’ve struggled with sliderOptions("value", currentValue + 1) but I don’t know how to tie this to an existing, instance of the slider. When using $(’#slider’).selectToUISlider( ..., sliderOptions()), it will create another instance of the slider ... Any live examples?

Thanks for any pointers! (Is this the right forum for this kind of question?)

Comment by Jakob on 09/03  at  01:54 PM

Many thanks for this.

Comment by PradeepKr on 09/03  at  10:11 PM

Having an issue with the select/input lining up with the slider when the highest selection value is No Maximum. It works for No Minimum, but generally misaligns several of the select variables and the slider value when that is an option and does not show No Maximum in the slider at all, but will show in the form selection (with the slider at the ‘next highest’ value.

Comment by Joe McCue on 09/04  at  07:05 AM

Hi Patty

Want to increase sales 20%?

Please visit http://www.bestmailijng.com to learn more about:
E-Mail Campaigns
Direct Mail Campaigns
Mobile Marketing Campaigns

We can help with ALL your marketing needs.  We will beat any price you receive!!

Since 1984 we are members of The Direct Marketing Association, and an INC 500 company.

Call now 1-800-692-2378

Comment by Herb Kirsch on 09/07  at  11:52 AM

i want to use this slider in my website http://www.ywjia.com, but it run very slow,and i don’t know what.

Comment by huangji on 09/10  at  02:12 PM

Very useful code. It is just what i was looking for. Now I am going to use it on my own website.

Comment by Texas Security Systems on 09/16  at  09:11 AM

nice post

Comment by seo expert uk on 09/16  at  01:52 PM

Great plugin, great design for the slider too.
It reminds me of the Google Analytics date range selector.

Comment by Trouvannonces on 09/16  at  05:01 PM

I need to trigger the Change event for when the slider is moved. It works ok for the select box but this is not going to be visible and I need some extra jquery to run when I change the slider, can anyone help?

Comment by Michelle on 09/21  at  03:23 PM

i really appreciate it that you shared with us such a informative post.

Comment by Seo on 09/21  at  08:23 PM

Please MAKE SURE this message reaches Patty Toland, or the person in charge of your Marketing !

We have a tool to take your B2B marketing efforts to the next level.
There is absolutely NOTHING like that out there.

You owe it to yourself to check out this short live demo:

You can download the free FULLY FUNCTIONAL trial here:
It will work on the same day you installed it.

Then come back to our web site to get your license:

Thanks, and looking forward to hear from you, and your success story.

David Blanco,

V.P. Marketing
Software Solutions Simplified, Inc.

P.S.: Call me any time at: 888-322-9565 / ext 77

Comment by David Blanco on 09/24  at  06:16 AM

tşkler arkadaşlar

Comment by herbalife on 09/30  at  10:36 PM

I had stopped by the site and took a look at your ranking for some of your terms and just wondered if you’d be at all interested in having your site improved in terms of where it’s ranked on the major engines, Google Yahoo etc. with the terms you’d like as well as some I’d like to suggest.  I can get your site on page 1 and have done so for about 283 people to date. Yes, I’m a real person, Yes, I actually just came back from viewing your site. I already know you get a ton of offers day to day. This is obviously different, I have plenty of references, work from home alone, have been doing this since 92 and still find time to raise 3 little girls.

Call me at home if you want to, I work at home all day long helping people out with their traffic and sites, automating page content updates via rss feeds (google loves that), doing press releases, article creation and distribution, building one way inbound links, graphic and site design, I can even add (by the thousands) targeted social media followers (like twitter) to your account all day long, automating messeges you want to send out to them about your site.  Posting ads on top various high traffic classified ad sites various cities, states etc.  I have clients that are swearing by what it is I do for them and would love to show you some examples if you’re at all interested.


Comment by Winston Redford on 10/10  at  04:44 AM

You should create a events, property help file. I was searching how to get the ‘change’ event but i couldn’t find it anywhere....................... but then i read the comments and finaly got there. Nice tool by the way!

Comment by Victor Angelier on 10/25  at  09:34 PM

Hello! The slider i was looking for. Great work guys. keep it up. i have one small little question though and I’m not sure if it has been handled in the posts above.

my problem is: I’m trying to create a schedular using this slider, and i want to use it for every single employee (i.e if i have 10 employees in my DB i want to dynamicly create 10 sliders). i’m using an asp:ListView binded to a DataSource that returns all the employees. the html markup is as follow:

asp:ListView ID="Schedule_ListView" runat="server">
<table style="width:100%">
<tr style="background-color:#000; color:#fff; font-weight:700;">
<th>Employee ID</th>
<th>Employee Name</th>
<th>Total Hours</th>
<tr id="itemPlaceHolder" runat="server" >
<td><%#StrConv(Eval("nom"), VbStrConv.ProperCase)%></td>
<td id="range-slider">
<select name="fromTime" id="fromTime">
<option value="7am">7:00</option>
<option value="7:15am">7:15</option>
<option value="7:30am">7:30</option>
<option value="7:45am">7:45</option>
<option value="8am">8:00</option>
<option value="8:15am">8:15</option>
<option value="8:30am">8:30</option>
<option value="8:45am">8:45</option>
<option value="9am" selected="selected">9:00</option>
<!--Goes all the way to 12am-->
<select name="toTime" id="toTime">
<!--Starts from 7am-->
<option value="6pm" selected="selected">6:00</option>
<option value="6:15pm">6:15</option>
<option value="6:30pm">6:30</option>
<option value="6:45am">6:45</option>
<option value="7pm">7:00</option>
<option value="7:15pm">7:15</option>
<option value="7:30pm">7:30</option>
<option value="7:45am">7:45</option>
<option value="8pm">8:00</option>
<option value="8:15pm">8:15</option>
<option value="8:30pm">8:30</option>
<option value="8:45am">8:45</option>
<option value="9pm">9:00</option>
now i tried all the tips and tricks of javasccript but nothing to it. Please let me know if there is a way to do it other than the one im using:

$(document).ready(function() {
for (i=0;i<=11;i++) {
var select0 = document.getElementByName(fromTime);
var select1 = document.getElementByName(toTime);
$(’\’’ + select0 + ‘, \’’ + select1 + ‘\’’).selectToUISlider().hide();

it keeps throwing an error

thank you in advance…

Comment by Ibrahim on 10/26  at  11:48 PM

Trekking Agency in Nepal.

Comment by Global Adventure Trekking on 10/28  at  10:11 AM

Thanks you i use this script.

Comment by Krishna Bogati on 10/28  at  10:13 AM

hello i found the way to generate the sliders dynamicly depending on the number of employees you have in your DB. the problem was to have a unic id for each select so what i did was binding the employeeID to the id of the select (i.e <select id=’<%# Eval("empID") %<fromTime’> and <select id=’<%# Eval("empID") %<toTime’>) and then in javascript you create a for loop like this

for (i = 0; i <= selectCount - 1; i++) {
var selectFrom = document.getElementsByName(’fromTime’).id;
var selectTo = document.getElementsByName(’toTime’).id;

$(’select#’ + selectFrom + ‘, select#’ + selectTo).selectToUISlider().hide();

Comment by Ibrahim on 10/28  at  06:33 PM

goruntulu sohbet sıtesı

Comment by msn show on 10/28  at  11:55 PM


I’m trying to implement this, but I’m having trouble seperating the sliders. The selects will be dynamic, and as such, I need to .each() and then apply a slider. How do I do this without having to add an id to each select, and then create a specific slider for each select?


Comment by davidyell on 11/02  at  07:36 PM

Thanks & Regards,

Comment by شكشكه on 11/03  at  07:49 PM

Hi! Great plugin!
Is there a way I can dynamically add an option to the selects, and then refresh the slider, so the new option appears in it?
Thank you very much in advance!

Comment by bigardone on 11/04  at  07:23 PM

hello ! I wanna use jQuery+java to make ruler plugin in the html page, it can response mousedrog,mouseclick,mousemove and so on event, and flowing with mouse event itmyself can change to it, look at it as shift movement , but ruler doesn’t change to long.
I think ask that I using jquery plugin can do it ?
please, colleagues teaching me very fast !  having some messages to my eMail ,thank you very much. from China.

Comment by delphizhai on 11/05  at  03:34 AM

Hi! Anybody can help me??

How can I remove the slider???


Comment by Pedro on 11/12  at  02:53 PM

Looks great , jQuery will be allways a good part of programming that will have wicked sick :D designs objects.

Comment by gold wedding rings on 11/13  at  12:02 PM

Great jQuery tool, will recommend this to friends, who need it. Thanks.

Comment by Restaurant Berater on 11/13  at  01:33 PM

This is very useful code. It is just what i was looking for. Thanks a lot!

Comment by Rote Rosen bestellen on 11/16  at  12:06 AM

Trekking Agency in Nepal…

Comment by agri dagi on 11/16  at  08:15 PM

Hi Scott & Eric,
Thanks for your response. let me check with your ideas and will back
Thanks again

Comment by herbalife on 11/17  at  12:41 AM

herbalife sipriş sitesi

Comment by herbalife on 11/17  at  12:45 AM

This is a lovely little widget and I look forward to using it a lot.

I spent a few hours struggling with the same problem as a number of people, that being the desire to respond to an event every time the slider is moved.

I ended up adding a single line to your widget to make this possible. By adding the line:
to line 98 of version 2.0, a ‘change’ event is triggered on the select element that just changed. Thus an event handler bound to the change event on that select is equivalent to an event handler on the slide event of the slider. Works perfectly for me.

Would be nice to see this implemented in the base code.

If you’re aware of any problems this might cause, I’d love to hear them… so far it seems to work fine in FF3.6

Comment by Dan Rumney on 11/19  at  05:32 PM

If you’re aware of any problems this might cause, I’d love to hear them… so far it seems to work fine in FF3.6

Comment by porno on 11/20  at  10:37 PM

If you need 2 dependant slider / selects, you will find troubles having the sliders firing onChange function or respecting the disabled property. Add this code in var sliderOptions = { (line 77 or so..) in selectToUISlider.jQuery.js to solve this problem:

disabled: $(this).attr(’disabled’), // fix disabled property
$(currSelect).change(); // fix onChange firing

Hope it helps.

Comment by Telmo on 11/25  at  03:50 PM

To fix the label wrapping issue:

in ui.slider.extras.css, add “white-space: nowrap;” to the stylesheet for “.ui-slider span.ui-slider-label”.  That did the trick for me.

Comment by Bryan G on 11/27  at  08:32 PM

Hi scott,
I need some help, as i m not expert in modifying existing lib. How can i make range between two knob movable on mouse drag. For a example dojo is doing the same what i need. here is a example

I cannot use dojo lib because i am working richfaces from jboss which only supports jquery library. can you help to achieve this.


Comment by sushant on 11/29  at  10:39 AM

I’ve just had to rip out a jquery UI slider due to instability in IE7. While this is not exactly a case which PE would necessarily solve, I have just discovered and am flabbergasted that jquery UI in 2010 still does not have progressive enhancement as standard. This is appalling for a component that millions of people use!! Get moving!!

Comment by mike nelson on 12/02  at  11:02 AM

If you’re aware of any problems this might cause, I’d love to hear them… so far it seems to work fine in FF3.6 ..

Comment by tuz on 12/04  at  10:17 PM

Nice plugin. This is just what I’m looking for. Is it compatable with all browsers inluding Opera and old IEs? Thanks for reply.

Comment by Tinklapiu Kurimas on 12/07  at  07:16 PM

thanke you admin

Comment by herbalife on 12/10  at  06:15 AM

I’m trying to use this slider for a play/pause functionality.
I understand that the slider handles are controlled via mouse and keyboard events.
Is it possible to move a particular slider handle via the script?

Suppose the user clicks play, I’d like to move the left slider handle one step at a time till the other handle’s position.

In case anyone has an idea on how I could do this, please let me know.


Comment by Raja on 12/10  at  02:15 PM

Hello! Here is a my idea:

If you need 2 dependant slider / selects, you will find troubles having the sliders firing onChange function or respecting the disabled property. Add this code in var sliderOptions = { (line 77 or so..) in selectToUISlider.jQuery.js to solve this problem:
disabled: $(this).attr(’disabled’), // fix disabled property
$(currSelect).change(); // fix onChange firing
Hope it helps.

Comment by Fred O. on 12/11  at  03:12 PM

herbalife sipariş

Comment by herbalife on 12/14  at  06:56 PM

How to set value to selectUIslider?

Comment by Pegas on 12/15  at  02:51 PM

Please help.

I want to have a play/pause button control this specialized jquery slider widget.

normal use seems for the user to slide the control, but I’d like to provide both the possibility for the user to choose a point on the slider, or to have a script control a simple movement across the slider.

here’s a not-yet-quite-working example: http://eoi.oecdco.de/progress.html

while manual sliding works (for the four first months), I cannot work out how to have play button move and update the slider.

any ideas?

Comment by Gerald on 12/15  at  03:14 PM

Definitely a big help to those who are seeking for assistance with jQuery. I salute you for this great post. Really informative it is!

Texas car insurance

Comment by Jazzy on 12/16  at  01:32 PM

Hi All
Is there any chance to add ui-wdiget-header to the 1 handle slider ... the points is that i want to add a color to the slider just like this one

please help


Comment by THE_SLIDER on 12/18  at  07:01 PM

hiya guys just wanna say fantastic job on this thanks a lot just one thing how can we get it to auto post form onmouseout preferably i have onchange done but changes when i goto the next value and refreshes not when i let go of the slider please help guys

email me

cheers rob

Comment by Rob on 12/29  at  07:38 PM

Very Helpful documentation .

If you want to user more than one slider then use like this

$(’select#valueA, select#valueB’).selectToUISlider({
labels: 5
//fix color

$(’select#avalueA, select#avalueB’).selectToUISlider({
labels: 5
//fix color

Comment by Suman Kar on 01/12  at  10:23 AM

This is very useful jquery code. I like it very much as it is just what i was looking for. Thanks a lot!

Comment by Oberstdorf Allgäu on 01/15  at  12:41 AM

I have 1 quation.
How to change value in slider ?

Comment by Fil on 01/18  at  01:52 PM

Hey , JavaScript Ninjas :) do you want you slider to get fill inside ?!
just like this one -> http://i55.tinypic.com/i70pwm.png

so this is the modify code that you need :)

* --------------------------------------------------------------------
* jQuery-Plugin - selectToUISlider - creates a UI slider component from a select element(s)
* by Scott Jehl,
* http://www.filamentgroup.com
* reference article: http://www.filamentgroup.com/lab/update_jquery_ui_16_slider_from_a_select_element/
* demo page: http://www.filamentgroup.com/examples/slider_v2/index.html
* Copyright (c) 2008 Filament Group, Inc
* Dual licensed under the MIT (filamentgroup.com/examples/mit-license.txt) and GPL (filamentgroup.com/examples/gpl-license.txt) licenses.
* Usage Notes: please refer to our article above for documentation
* --------------------------------------------------------------------

jQuery.fn.selectToUISlider = function (settings) {
var selects = jQuery(this);
//accessible slider options
var options = jQuery.extend({
labels: 3, //number of visible labels
tooltip: true, //show tooltips, boolean
tooltipSrc: ‘text’, //accepts ‘value’ as well
labelSrc: ‘value’, //accepts ‘value’ as well ,
sliderOptions: null
}, settings);

//handle ID attrs - selects each need IDs for handles to find them
var handleIds = (function () {
var tempArr = [];
selects.each(function () {
tempArr.push(’handle_’ + jQuery(this).attr(’id’));
return tempArr;

//array of all option elements in select element (ignores optgroups)
var selectOptions = (function () {
var opts = [];
selects.eq(0).find(’option’).each(function () {
value: jQuery(this).attr(’value’),
text: jQuery(this).text()
return opts;

//array of opt groups if present
var groups = (function () {
if (selects.eq(0).find(’optgroup’).size() > 0) {
var groupedData = [];
selects.eq(0).find(’optgroup’).each(function (i) {
groupedData = {};
groupedData.label = jQuery(this).attr(’label’);
groupedData.options = [];
jQuery(this).find(’option’).each(function () {
groupedData.options.push({ text: jQuery(this).text(), value: jQuery(this).attr(’value’) });
return groupedData;
else return null;

//check if obj is array
function isArray(obj) {
return obj.constructor == Array;
//return tooltip text from option index
function ttText(optIndex) {
return (options.tooltipSrc == ‘text’) ? selectOptions[optIndex].text : selectOptions[optIndex].value;

//plugin-generated slider options (can be overridden)
var sliderOptions = {
step: 1,
min: 0,
orientation: ‘horizontal’,
max: selectOptions.length - 1,
range: selects.length > 1, //multiple select elements = true
slide: function (e, ui) {//slide function
var thisHandle = jQuery(ui.handle);
//handle feedback
var textval = ttText(ui.value);
.attr(’aria-valuetext’, textval)
.attr(’aria-valuenow’, ui.value)
.find(’.ui-slider-tooltip .ttContent’)

//control original select menu
var currSelect = jQuery(’#’ + thisHandle.attr(’id’).split(’handle_’)[1]);
currSelect.find(’option’).eq(ui.value).attr(’selected’, ‘selected’);
var length = (thisHandle.attr(’aria-valuemax’) - thisHandle.attr(’aria-valuemin’));
var fillerWidth = calculateFill(ui.value, length);
fill(thisHandle.parent("div").find(’.filler’), fillerWidth);
//thisHandle.parent("div").find(’.filler’).css(’width’, fillerWidth + ‘%’);
values: (function () {
var values = [];
selects.each(function () {
return values;

//slider options from settings
options.sliderOptions = (settings) ? jQuery.extend(sliderOptions, settings.sliderOptions) : sliderOptions;

//select element change event
selects.bind(’change keyup click’, function () {
var thisIndex = jQuery(this).get(0).selectedIndex;
var thisHandle = jQuery(’#handle_’ + jQuery(this).attr(’id’));
var handleIndex = thisHandle.data(’handleNum’);
thisHandle.parents(’.ui-slider:eq(0)’).slider("values", handleIndex, thisIndex);

//create slider component div - used to fill with colour
var sliderComponent = jQuery(’<div><div class="filler" style="height:9px; width:9px; background-color:red;"></div></div>’);

selects.each(function (i) {
var hidett = ‘’;

//associate label for ARIA
var thisLabel = jQuery(’label[for=’ + jQuery(this).attr(’id’) + ‘]’);
//labelled by aria doesn’t seem to work on slider handle. Using title attr as backup
var labelText = (thisLabel.size() > 0) ? ‘Slider control for ‘ + thisLabel.text() + ‘’ : ‘’;
var thisLabelId = thisLabel.attr(’id’) || thisLabel.attr(’id’, ‘label_’ + handleIds).attr(’id’);

if (options.tooltip == false) { hidett = ‘ style="display: none;“‘; }
jQuery(’[url="#" ‘ +
‘ tabindex="0" ‘ +
‘id=”’ + handleIds + ‘“ ‘ +
‘cur-val= ”’ + options.sliderOptions.values / options.sliderOptions.max * 100 + ‘“ ‘ +
‘class="ui-slider-handle" ‘ +
‘role="slider" ‘ +
‘aria-labelledby=”’ + thisLabelId + ‘“ ‘ +
‘aria-valuemin=”’ + options.sliderOptions.min + ‘“ ‘ +
‘aria-valuemax=”’ + options.sliderOptions.max + ‘“ ‘ +
‘aria-valuenow=”’ + options.sliderOptions.values + ‘“ ‘ +
‘aria-valuetext=”’ + ttText(options.sliderOptions.values) + ‘“ ‘ +
‘]<span class="screenReaderContext">’ + labelText + ‘</span>’ +
‘<span class="ui-slider-tooltip ui-widget-content ui-corner-all”’ + hidett + ‘><span class="ttContent"></span>’ +
‘<span class="ui-tooltip-pointer-down ui-widget-content"><span class="ui-tooltip-pointer-down-inner"></span></span>’ +
.data(’handleNum’, i)
var fillerWidth = calculateFill(options.sliderOptions.values, options.sliderOptions.max);
fill(sliderComponent.find(".filler"), fillerWidth);
//sliderComponent.find(".filler").css(’width’, fillerWidth + ‘%’);

//write dl if there are optgroups
if (groups) {
var inc = 0;
var scale = sliderComponent.append(’<dl class="ui-slider-scale ui-helper-reset” role="presentation"></dl>’).find(’.ui-slider-scale:eq(0)’);
jQuery(groups).each(function (h) {
scale.append(’<dt style="width: ‘ + (100 / groups.length).toFixed(2) + ‘%’ + ‘; left:’ + (h / (groups.length - 1) * 100).toFixed(2) + ‘%’ + ‘“><span>’ + this.label + ‘</span></dt>’); //class name becomes camelCased label
var groupOpts = this.options;
jQuery(this.options).each(function (i) {
var style = (inc == selectOptions.length - 1 || inc == 0) ? ‘style="display: none;”’ : ‘’;
var labelText = (options.labelSrc == ‘text’) ? groupOpts.text : groupOpts.value;
scale.append(’<dd style="left:’ + leftVal(inc) + ‘“><span class="ui-slider-label">’ + labelText + ‘</span><span class="ui-slider-tic ui-widget-content”’ + style + ‘></span></dd>’);

//write ol
else {
var scale = sliderComponent.append(’<ol class="ui-slider-scale ui-helper-reset” role="presentation"></ol>’).find(’.ui-slider-scale:eq(0)’);
jQuery(selectOptions).each(function (i) {
//console.log("write ol");
var style = (i == selectOptions.length - 1 || i == 0) ? ‘style="display: none;”’ : ‘’;
var labelText = (options.labelSrc == ‘text’) ? this.text : this.value;
scale.append(’<li style="left:’ + leftVal(i) + ‘“><span class="ui-slider-label">’ + labelText + ‘</span><span class="ui-slider-tic ui-widget-content”’ + style + ‘></span></li>’);

//show and hide labels depending on labels pref
//show the last one if there are more than 1 specified
if (options.labels > 1) sliderComponent.find(’.ui-slider-scale li:last span.ui-slider-label, .ui-slider-scale dd:last span.ui-slider-label’).addClass(’ui-slider-label-show’);

//set increment
var increm = Math.max(1, Math.round(selectOptions.length / options.labels));
//show em based on inc
for (var j = 0; j < selectOptions.length; j += increm) {
if ((selectOptions.length - j) > increm) {//don’t show if it’s too close to the end label
sliderComponent.find(’.ui-slider-scale li:eq(’ + j + ‘) span.ui-slider-label, .ui-slider-scale dd:eq(’ + j + ‘) span.ui-slider-label’).addClass(’ui-slider-label-show’);

//sliderComponent.find(’.filler’).css(’width’, sliderComponent.attr(’cur-val’) + ‘%’);

//style the dt’s
sliderComponent.find(’.ui-slider-scale dt’).each(function (i) {
‘left’: ((100 / (groups.length)) * i).toFixed(2) + ‘%’

//inject and return
.insertAfter(jQuery(this).eq(this.length - 1))
.attr(’role’, ‘application’)
.each(function () {
jQuery(this).css(’marginLeft’, -jQuery(this).width() / 2);

//update tooltip arrow inner color
sliderComponent.find(’.ui-tooltip-pointer-down-inner’).each(function () {
var bWidth = jQuery(’.ui-tooltip-pointer-down-inner’).css(’borderTopWidth’);
var bColor = jQuery(this).parents(’.ui-slider-tooltip’).css(’backgroundColor’)
jQuery(this).css(’border-top’, bWidth + ‘ solid ‘ + bColor);

var values = sliderComponent.slider(’values’);

if (isArray(values)) {
jQuery(values).each(function (i) {
sliderComponent.find(’.ui-slider-tooltip .ttContent’).eq(i).text(ttText(this));
else {
sliderComponent.find(’.ui-slider-tooltip .ttContent’).eq(0).text(ttText(values));

function leftVal(i) {
return (i / (selectOptions.length - 1) * 100).toFixed(2) + ‘%’;

function calculateFill(currVal, maxVal) {
return currVal / maxVal * 100;

function fill(obj, objWidth) {
obj.css(’width’, objWidth + ‘%’);

return this;

Comment by techcntrl on 01/24  at  05:26 PM

Excellent technique.

Comment by RCA ieftin on 01/25  at  01:07 AM

thanks very good july

Comment by izmir nakliyat on 01/31  at  01:30 PM

Google now using business reviews to determine business ranking!

How does posting positive reviews help in your businesses Google ranking?

1. Positive reviews increase your businesses rank by linking important and relevant websites to your website.
2. A constant stream of positive reviews improves your online reputation.
3. Positive reviews drive traffic to your business
4. Positive reviews restore a tarnished reputation buy pushing down negative reviews and links.
5. Helps protect against competitors or anyone else from attempting to ruin your ranking.

Call 866-544-8456 for more information http://www.positivereviews.com

Comment by More Information on 02/03  at  12:04 AM

Very nice Slider~~~!!! Thanks a lot~~~!!!

I modified the Slider, so when a user slide to a “number” on the scale, the drop down list changes to the value of the number that the user slides to.

I placed 3 sliders ( input name="Rating1", input name="Rating2", input name="Rating3") on my page and 1 text fields (input name="Total").  I want the Total field add up the values of these 3 sliders, and automatically reflect the change of values on these 3 ratings.  Total = Rating1 + Rating2 +Rating 3.  I worte java scripts to add up the numbers and OnChange event on each input field to reflect the changes of Ratings and Total.

However, I encounter a problem.  The Total field only changes value when a user choose to use the “Drop Down List”.  If the user choose to use the Slider, the corresponding drop down list would dispaly the value that the user slides to, but the Total field would ignore the value.

How do I fix it, so the total field will change value when the user choose to use Slider?

Thank you!!!

Comment by annie on 02/05  at  03:34 AM

Thanks, it’s awsome plugin!

I have a question.
Is this possible to set the element which wraps slider elements?
I want to put the slider div element in a specific element.


Comment by KwonNam on 02/09  at  08:41 AM

I made a simple patch for specifying slider ui element.

Index: selectToUISlider.jQuery.js
--- selectToUISlider.jQuery.js (리비전 2278)
+++ selectToUISlider.jQuery.js (작업 사본)
@@ -23,7 +23,8 @@
tooltip: true, //show tooltips, boolean
tooltipSrc: ‘text’,//accepts ‘value’ as well
labelSrc: ‘value’,//accepts ‘value’ as well ,
- sliderOptions: null
+ sliderOptions: null,
+ target: null
}, settings);

@@ -117,7 +118,7 @@

//create slider component div
- var sliderComponent = jQuery(’<div></div>’);
+ var sliderComponent = options.target == null ? jQuery(’<div></div>’) : options.target;

@@ -206,9 +207,11 @@

//inject and return
- sliderComponent
- .insertAfter(jQuery(this).eq(this.length-1))
- .slider(options.sliderOptions)
+ if (options.target == null) {
+ sliderComponent.insertAfter(jQuery(this).eq(this.length-1))
+ }
+ sliderComponent.slider(options.sliderOptions)

You can use this like the following…
$("blah..blah..").selectToUISlider({target: $("#rangeslider")});

Comment by KwonNam on 02/09  at  09:16 AM

can this

//fix color
$(’select#avalueA, select#avalueB’).selectToUISlider({
labels: 5
//fix color

Comment by Tyler Perry on 02/12  at  09:20 AM

I used this on my site, really useful plugin I must say

Comment by haemophilus influenzae on 02/19  at  09:49 AM

It is really a more creative way to do things
Who like to select date through pages of calendar
sliding is so much more fun

Comment by Ketones on 02/19  at  09:52 AM

I have a list of 13,173 newly formed businesses that need Web Design. I am selling the list for $795. There are free leads to try out on http://www.freesampledata.com

Comment by Christopher Miller on 02/21  at  07:37 PM

This is a great solution!
I don’t know a jQuery and Javascript and I have a one question. Whether this text can be positioned in the center on “Med” position and not to move with the slider?

Thank you

Comment by Milena on 02/22  at  05:30 PM

Thats exactly what I was looking for. I won’t be using flash on my sites anymore. I can do most of the stuff using jquery. Thank you

Comment by spondylolisthesis on 02/23  at  03:18 PM


I want to translate article ‘ Update: jQuery UI Slider from a Select Element ‘ (http://www.filamentgroup.com/lab/update_jquery_ui_slider_from_a_select_element_now_with_aria_support/) to Belorussian language, which is my mother tongue.

When I"ll be done I’m gonna send to you a link to the article. Is it ok with you, don’t you mind?

Do you prefer email or IM for contact (if any questions regarding the translation arise)? What instant messaging client (if any) do you use? AIM, MSN, Skype?

Martha Ruszkowski

Comment by Martha Ruszkowski on 02/28  at  03:14 PM

thankyou good

Comment by ek gelir on 03/05  at  03:11 AM

Thnak You Admin Nice Post

Comment by herbalife on 03/06  at  07:57 PM

Manchester Escorts Premuim Exclusive Company Escort Agency, Based In North West England For Out Call Services

Comment by Ken Hill on 03/07  at  01:50 AM

Thank you KwonNam, I was having trouble with that. Thanks for the patch. :)

Comment by Megan on 03/11  at  05:50 AM

This slider is exactly what we were looking for when trying to create a non-flash calculator to illustrate service savings. However, when we include the coding on the page, my sliders and tooltips are cut off and I have no idea where to start in the CSS to style this thing so it looks normal and like all of the demos. Any ideas?


Comment by Chris Wanamaker on 03/15  at  04:05 PM

I think I figured it out. WordPress has the margins and padding all messed up, so I made a correction for it in the script. All looks good now!

Comment by Chris Wanamaker on 03/15  at  04:43 PM


this is a great slider!  I’ve made lots of use of it. However, I do encounter a weired problem.

I put several sliders on my page and incorporate other javascript functions.  However, whenever i need to revise the other javascript functions I wrote, the sliders stop working.  So far, I found the only way to make the sliders start working again is go back to the version that doesn’t have any of my own java scripts functions, then copy and pase those functions back one-by-one. 

I think this problem pretty odd.  I wonder if there’s something I need to “Refresh” when I edit my own javascript functions on the page with the jQuery Sliders.  How do I avoid re-doing all javascript functions except the jQuery Sliders every time when I need to make changes on my javascript fuctions?

Thank you!!!

Comment by Annie on 03/16  at  11:14 PM

Very good Thank you

Comment by herbalife on 03/20  at  02:34 PM

What a great blog to read.. :)

Comment by emergency dentist on 03/22  at  07:49 AM

Really i love this post . one of the great post on web.

Comment by GauravSEO on 03/22  at  09:11 AM


Thanks for the Great Plug in. I would like to know how to increment the time slider by 15 minutes on button click. I have my value updated but not able to update the tool tip and the select box.

Any help would be greatly appreciated.


Comment by Paul on 03/22  at  10:56 PM

does anyone knows why i get the select boxes in google chrome instead of the slider? this only happens in google chrome.

Comment by shakespeare4her on 03/24  at  11:57 AM

nice collection of jquery slideshow.
Thanks to sharing.

Comment by riffbird on 03/27  at  05:09 PM

if you want to bind to the ‘slide’ event, you can do this with the following workaround: bind the start event, and in the start event, add a new binding to the slide event:

sliderOptions: {
start: function() {
if (this.inited == undefined) {
this.inited = true;
$(this).bind("slide", function(e, ui) {
console.log(’slider-value: ‘+ui.value);
console.log(’select-value: ‘+$("#slider").find("option").eq(ui.value).attr("value"));

Comment by Thomas on 03/28  at  03:01 AM

A compliment for this crazy side.  Actually I knocked through chance on that and thought myself to leave behind a nice entry and many greetings. 
_____ \\\!!!///____
.._____( ô ô )____..

Perhaps they view once on my homepages past!  .

Comment by fertility treatment Mexico on 03/28  at  12:15 PM

Hello all,
I can confirm that this plug in works great

Comment by Shark Steam Pocket Mop Reviews on 03/30  at  06:10 PM

is this still supported?
I successfully installed the slider and it works perfect with only one exception. In IE 9 - the drag and drop function of the handle is not working. If you check the demo above using IE 9 you will understand what I mean.
Any suggestions?
Thank you for the great code though!

Comment by Razvan on 04/01  at  10:44 AM

thanks for sharing those great ideas with the help of comments

Comment by SEO Company Nepal on 04/08  at  09:40 PM

I just found your blog and wanted to say that I really liked browsing your blog. Anyway, I’ll be subscribing to your feed, and I hope you write back soon!

Comment by San francisco limousine on 04/09  at  03:23 AM

great plugin man

Comment by c programming on 04/09  at  10:48 PM

Hi - great work on this.

There’s just one thing and it’s perfect for what I need...is there a way to disable the first handle completely but still show the range’s different colour - as though the first handle is always set to position 0?
Like this actually: http://jqueryui.com/demos/slider/rangemin.html
Only with your awesome select drop down functionality integrated. I can disable everything I don’t need within the existing code, but I can’t get the ui-widget-header to display when the first handle isn’t used, and I really need the additional colour to display based on the position of the second handle and taking the first (disabled) handle position as static.

Is there some way to set the first handle’s position to always be 0 and for clicks to only interact with the second handle - something like that?


Comment by Min on 04/11  at  08:17 AM

Great plugin.

I do have an issue though. We use custom SELECT dropdowns, using js and css . When We drag the slider it now doesnt update the select value but if we change the select value it moves the slider to correct position.

I am kinda stumped as to how we could fix this, has anyone come across this using custom drop down selects.

We are using similar code to http://www.bulgaria-web-developers.com/projects/javascript/selectbox/

I really need to get this issue fixed asap. Any help appreciated.

Comment by Steve on 04/13  at  06:15 AM

thankyou admine

Comment by herbalife on 04/15  at  06:01 PM

I also want to re-iterate how great it would be if you guys hosted these plugins somewhere that we could easily see bugs, provide fixes, and not have to read though huge comment threads to find issues/bugs/workarounds.

I noticed that when updating the select boxes, the slider position is updated but the tooltip values are not!  To fix this, I had to modify the function that gets bound to the selects to be the following:

//select element change event
selects.bind(’change keyup click’, function(){
var thisIndex = jQuery(this).get(0).selectedIndex;
var thisHandle = jQuery(’#handle_’+ jQuery(this).attr(’id’));
var handleIndex = thisHandle.data(’handleNum’);
var textval = ttText(thisIndex);
.attr(’aria-valuetext’, textval)
.attr(’aria-valuenow’, thisIndex)
.find(’.ui-slider-tooltip .ttContent’)
.text( textval )
.parents(’.ui-slider:eq(0)’).slider("values", handleIndex, thisIndex)

Comment by Chris Barr on 04/15  at  06:18 PM

I also want to re-iterate how great it would be if you guys hosted these plugins somewhere that we could easily see bugs, provide fixes, and not have to read though huge comment threads to find issues/bugs/workarounds.

I noticed that when updating the select boxes, the slider position is updated but the tooltip values are not!  To fix this, I had to modify the function that gets bound to the selects to be the following:

//select element change event
selects.bind(’change keyup click’, function(){
var thisIndex = jQuery(this).get(0).selectedIndex;
var thisHandle = jQuery(’#handle_’+ jQuery(this).attr(’id’));
var handleIndex = thisHandle.data(’handleNum’);
var textval = ttText(thisIndex);
.attr(’aria-valuetext’, textval)
.attr(’aria-valuenow’, thisIndex)
.find(’.ui-slider-tooltip .ttContent’)
.text( textval )
.parents(’.ui-slider:eq(0)’).slider("values", handleIndex, thisIndex)

Comment by Chris Barr on 04/15  at  06:19 PM

Wonderful plugin, but sometimes I slider with input boxes. Can someone make this plugin for input boxes?

Comment by Kalian on 04/16  at  04:58 PM

wonderful plugin i use this plugin in my website .it is really great plugin

Comment by darwin backpackers on 04/16  at  08:47 PM

Has anybody else noticed that the dragging feature of this plugin doesn’t work in IE9? Anybody have a fix for it?

Comment by Andrew Philpott on 04/20  at  03:22 PM

Thanks for the Great Plug in. I would like to know how to increment the time slider by 15 minutes on button click. I have my value updated but not able to update the tool tip and the select box. .
Any help would be greatly appreciated

Comment by herbalife on 04/22  at  06:32 AM


Comment by herbalife on 04/22  at  06:34 AM

Thank you good think like this too…

Comment by ek gelir on 04/23  at  03:41 PM

The article is a good one i have read. Thanks for sharing.

Comment by Stratejik Pazarlama on 04/23  at  07:26 PM

I tried to use the tooltip update from select fix that was suggested by “Matt Lohier on 05/11”, but found that if a user clicked on the select box, the tooltip would lose the stylized arrow and no longer update from the slider.

Comment by Seo Nedir on 04/23  at  07:32 PM

herbalife ürünleri

Comment by herbalife on 04/24  at  03:35 PM

The code is great!

Thanks for sharing this useful range slider.

This saves my day.

Thank you very much.

Comment by Joedel on 04/27  at  05:49 PM

thanks for your great site with full inofrmation

Comment by texas nspire cx cas on 04/30  at  02:54 PM

Excellent work — and a sincere “thank you” for giving this away.  Saved my ass and then educated it.

Comment by Dustin Larimer on 05/01  at  08:12 PM

The plugin really works great. Great piece of programming
Garmin Nuvi 1300 Garmin Nuvi 1300 Review

Comment by Garmin Nuvi 1300 on 05/02  at  08:53 AM

guys any way to destroy the slider and then rebuild it ???

Comment by andy on 05/03  at  08:44 AM

not working for IE9. has too many bugs to use.

Comment by dreagan on 05/04  at  04:35 PM

Just as a test, I replaced the custom jQuery UI with 1.8.2 (http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js) to see if that fixed it for IE9 and it did.

Comment by Andrew Philpott on 05/04  at  04:49 PM

How do I put a slider in the bottom of the site? Неге интернет магазин секс шоп

Comment by Sex Shop on 05/06  at  10:23 AM

Я хочу установить слайдер в футер этого сайта интернет магазин секс шоп, но он почему-то когда я его устанавливаю внизу, - выскакивает перед надписью нижнее бельё. Это что баг какой-то или просто у меня где-то ошибка?

Comment by Секс шоп on 05/06  at  02:38 PM

Thanks for the Great Plug in. I would like to know how to increment the time slider by 15 minutes on button click. I have my value updated but not able to update the tool tip and the select box. .
Any help would be greatly appreciated

Comment by herbalife on 05/07  at  09:15 PM

Thanks to share this code but I have a question, how I can block an extrem of slider, ie. that the user can move only one side of the slider, and how can I change de color of slider when in one page I have more than one slider.


Comment by Paola Ergueta on 05/10  at  10:21 PM

thanks nice great information
persianary n20

Comment by persianary n20 on 05/11  at  11:57 AM

this work, wait another update for this slider.

Comment by osi layers on 05/13  at  12:03 PM

I was not sure who to call within your company. UMP is a marketing capital firm with 3 subsidiary brands that cater to the Hi-Tech/B2B industries & provide an array of marketing services including:

Cold Calling & Lead Generation
Pay Per Click Services
Email & Contact Page Marketing
Contact & Email Data

Best of all we provide full service marketing solutions & targeted data including full contact details to help your company reach thousands of prospects. We provide the best support to ensure each customer receives the most leads possible. Contact me directly for a trial offer. 

Comment by Tracy Hamilton on 05/26  at  01:03 AM

gthanks nice great site with full information and i have add in my favorites list

Comment by casio classpad 330 on 05/26  at  02:04 PM

Great plugin.  thanks.

Comment by Herbalife on 05/26  at  02:45 PM

Great plugin i like it so much thanks developer for this great sharing and making this great plugin

Comment by John Smith on 05/26  at  06:39 PM

Really great plugin.
I will use it on my sites

Comment by Dolmetscher in Kiew on 05/27  at  05:00 PM

Thanks to share this code

Comment by Transfer on 05/27  at  05:02 PM

The code is great!
Thanks for sharing

Comment by Lingekon on 05/27  at  05:04 PM

This is a fantastic plugin.  I still have to figure out how I can efficiently implement it on my <a href="http://www.bestumbrellastrollers.net>umbrella stroller website</a>.  I would like to allow users to select strollers based on a price range.

I am already using the latest version of the jQuery UI (http://ajax.googleapis.com/ajax/libs/jqueryui/).

Thanks for sharing!

Comment by Jack from Best Umbrella Strollers on 05/29  at  10:47 AM

This may seem counter-intuitive but is there a way to defeat the same-name = same-slider logic? I am trying to use this in a very dynamic form scheme where I need the different selects to have the same name (collecting the different values as an array) but each have its own slider?

Comment by Rick Vaughan on 06/13  at  09:53 PM

Great plug-in, but does anyone know how to affect the wrapping of labels, as well as the orientation of labels to tic marks?  I am still having troubles with the labels wrapping if there is a space in the label name, and something (?!) that I did is now getting the labels to align to the right of the tic marks, as opposed to center over the tic marks. .

Comment by herbalife on 06/18  at  04:30 PM

in term of slider feature in past i found javascript and jquery ruled nowadays.

Comment by seo nepal on 06/19  at  09:28 AM

Really great plugin.
I will use it on my sites

Comment by herbalife on 06/19  at  12:56 PM

Incredible! I would give my left arm for a demo of the date range slider coupled to an event list that updates dynamically based on slider input!
Great stuff! Thanks! .

Comment by herbalife izmir on 06/26  at  01:42 PM

UMP is a marketing company with 3 subsidiary brands that cater to the B2B industries & provide an array of marketing services including: Cold Calling/Lead Generation - SEO - PPC - Email Marketing - Contact & Email Lists. Best of all we provide marketing services to help you reach thousands of prospects daily. Contact me directly for a trial offer.

Comment by Tracy Hamilton on 06/28  at  06:12 AM

How can i move the slider pointer/ handler to a purticular point in the scale ?  Ex : I want to move the slider to “Slow” point when i click on a button in the page. How to do that ?

Comment by Shyju on 06/30  at  04:57 PM

How can i move the slider pointer/ handler to a purticular point in the scale ?  Ex : I want to move the slider to “4” when i click on a button in the page. How to do that ?

I just tried using


But doesnt seems to works for me, The example i tried is here

Any help would be appreciated. Thanks

Comment by Shyju on 06/30  at  08:18 PM

Thanks to share this code but I have a question, how I can block an extrem of slider, ie. that the user can move only one side of the slider, and how can I change de color of slider when in one page I have more than one slider.

Comment by asigurari locuinte, case on 07/01  at  04:08 PM

Slider is not working in Internet Explorer .
Any Solutions?

Comment by Koch on 07/01  at  05:16 PM

The design is very good and amazing plugin for slider.
I will try for IE and then let me know.

Comment by Uppababy G-Luxe on 07/03  at  10:58 AM

Are you guys using role="application" just to enable keyboard access? If so, I would recommend you reconsider. I have recently discovered that role="application" can be quite disorienting for a screen reader user, as it completely changes how their browser functions. It really is a bit funny that we are doing something for the sake of accessibility that accidentally hampers it a bit, but such is the wild world of new technologies. Look at this excellent article for more details: http://www.accessibleculture.org/research/not-all-aria-widgets-deserve-role-application/

Comment by Bruno Torquato on 07/05  at  05:38 PM

Hi Bruno - When we were writing our book and developing this widget, the advice we were given based on the ARIA spec draft at that time was that we should apply this role, but we’ve heard similar feedback recently about it’s use. Is there an authoritative article that outlines best practices on how to use role="application"? This is a confusing topic, even for folks like us familiar with ARIA.

Comment by Todd Parker on 07/05  at  07:16 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