jQuery UI Slider (setting programatically)

Question

Hi Folks,

I'd like to modify the sliders on-the-fly. I tried to do so by using

$("#slider").slider("option", "values", [50,80]);

This call will set the values, but the element will not update the slider positions. Calling

$('#slider").trigger('change');

does not help either.

Is there another/better way to modify the value AND slider position ?

Answer 1

It depends on if you want to change the sliders in the current range or change the range of the sliders.

If it is the values in the current range you want to change, then the .slider() method is the one you should use, but the syntax is a bit different than you used:

$("#slider").slider('value',50);

or if you have a slider with two handles it would be:

$("#slider").slider('values',0,50); //sets first handle
$("#slider").slider('values',1,80); //sets second handle

If it is the range you want to change it would be:

$("#slider").slider('option',{min: 0, max: 500});

Answer 2

It's possible to manually trigger events like this:

Apply the slider behavior to the element

var s = $('#slider').slider();

...

Set the slider value

s.slider('value',10);

Trigger the slide event, passing a ui object

s.trigger('slide',{ ui: $('.ui-slider-handle', s), value: 10 });