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

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

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

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!

To clarify, I have only experienced this bug in IE7

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!

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?

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.

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.

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)

Thanks!

Hiya!

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) {
alert(’test’);
});

but that does not work.. any ideas?

Thanks a lot!

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.

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.

@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

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);
thisHandle
.attr(’aria-valuetext’, textval)
.attr(’aria-valuenow’, thisIndex)
.find(’.ui-slider-tooltip’)
.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

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?

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.

@Wiseon3

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?

Cheers,

Tair.

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) ) {
$(which).selectToUISlider();
}

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

Ideas?

Thanks

Jeff in Seattle

very nice tool. thx. great job.

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.

a solution for disabled option in select?

congratulations for this job

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.

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.

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.

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?

Thanks,

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

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
$(’select#doesnotexist’).selectToUISlider();
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) {
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) );
}
}

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

Nice though.

J.

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

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

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

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?

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?

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

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.

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?

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.

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.

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?

-Angus

Brilliant - great plug in!!

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

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.

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!

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?

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?

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.

Regards,

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

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.

Thanks
i use it is script

Thanks for your work.

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

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

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.

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

killAllMenus();
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!

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

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

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

@convertor valutar:

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

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

P.S. It works great.!

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

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.

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.

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.

What is the license for this object?

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.

Regards,
Saša Staenković.

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

to disable slider:

$(function() {
$(’select#speed’).selectToUISlider({
labels: 5,
sliderOptions: {disabled:true}
});
});

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

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?

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

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!

Thanks

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">
<form>
<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>
</select>
</form>
</div>
...

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();
});

by

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 :’( !

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.

Good post Myrdihin. You are the MAN!!!

I can resolve my problem because you.

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.

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

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

Using
- jQuery 1.3.2
- UI 1.7.2 (with all components)

Could anyone make a suggestion?

Thanks!
-Dave

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

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

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

Awesome work guys.

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.

Hi
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();

Nice stuf guys

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?
Thanks!

that is really good blog thanks for info

hi,
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)?

thanks

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.

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

thanks

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

How can we know when new version is released?

Where can I download plugin?

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.

how can change size of created slider???

@pankaj CSS style of slider wrapper.

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

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

Thank you , its useful

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

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

Thanks for your work. It works perfectly in IE8 plugin

filamentgroup rocks...i love your script guys!

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

thats is good post keep it up thanks for this

Nice script. Thank you very much.

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

http://img187.imageshack.us/img187/8793/avoid.png

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

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

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

How do you mean not execute on vista?

Hi,

I’m having the same issue as Dave:

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

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

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() {
$(this).selectToUISlider().hide()
});

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

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

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

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

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?

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.

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?

thaaaaaaaaaanks

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…

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

Very simple and useful thank you.

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

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

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.

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

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

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

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

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

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 ?

thanks

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.

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

Anyone?

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

Is there any way to do this?

Nice stuf guys, filament group rocks!

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?

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

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

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?

Thanks!

@ Chris I use UI 1.8 with 1.4.

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

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.

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?

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

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

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.

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

Hello,

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?

Thanks!

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

@Gerben

for any class using ui-slider-tooltip

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

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

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

@Casper I use if with Zend_Form too, extended ZendX_JQuery_Form_Element_UiWidget

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?

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…

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

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

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

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?

I think this is what you need

$(’#myElementId’).selectToUISlider({
labels: 2,
labelSrc: ‘text’,
tooltip: true,
sliderOptions: {
animate: true,
change: function(event) {
doSubmitMyStuff();
}
}
})

function doSubmitMyStuff(){
// add your code here
}

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

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

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?

Okay, I added on line 98 of the js file
$(currSelect).change();

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

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.

my dropdown select boxes are hidden as standard. I got no code what so ever in the head section like:
$(’select’).selectToUISlider();

Is that a bug or what is it?

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?

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

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.

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

Hi,

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

Do you have ant better solution than this?

Thanks,
Suresh

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?

Big thx very Brilliant and great plug in!!

ragards

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);
thisHandle
.attr(’aria-valuetext’, textval)
.attr(’aria-valuenow’, thisIndex)
.find(’.ui-slider-tooltip .ttContent’).text(textval);
});

Hi,

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

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

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()
to
text: jQuery(this).attr(’label’)

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