jQuery UI Slider (setting programmatically)

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?

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 (index 0) to 50
$("#slider").slider('values',1,80); // sets second handle (index 1) to 80

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

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

For me this perfectly triggers slide event on UI Slider :

hs=$('#height_slider').slider();
hs.slider('option', 'value',h);
hs.slider('option','slide')
       .call(hs,null,{ handle: $('.ui-slider-handle', hs), value: h });

Don't forget to set value by hs.slider('option', 'value',h); before the trigger. Else slider handler will not be in sync with value.

One thing to note here is that h is index/position (not value) in case you are using html select.

None of the above answers worked for me, perhaps they were based on an older version of the framework?

All I needed to do was set the value of the underlying control, then call the refresh method, as below:

$("#slider").val(50);
$("#slider").slider("refresh");

Mal's answer was the only one that worked for me (maybe jqueryUI has changed), here is a variant for dealing with a range:

$( "#slider-range" ).slider('values',0,lowerValue);
$( "#slider-range" ).slider('values',1,upperValue);
$( "#slider-range" ).slider("refresh");

If you need change slider values from several input, use it:

html:

<input type="text" id="amount">
<input type="text" id="amount2">
<div id="slider-range"></div>

js:

	$( "#slider-range" ).slider({
	range: true,
	min: 0,
	max: 217,
	values: [ 0, 217 ],
	slide: function( event, ui ) {
		$( "#amount" ).val( ui.values[ 0 ] );
		$( "#amount2" ).val( ui.values[ 1 ] );
	}
    });

$("#amount").change(function() {
    $("#slider-range").slider('values',0,$(this).val());
});
$("#amount2").change(function() {
    $("#slider-range").slider('values',1,$(this).val());
});

https://jsfiddle.net/brhuman/uvx6pdc1/1/

One part of @gaurav solution worked for jQuery 2.1.3 and JQuery UI 1.10.2 with multiple sliders. My project is using four range sliders to filter data with this filter.js plugin. Other solutions were resetting the slider handles back to their starting end points just fine, but apparently they were not firing an event that filter.js understood. So here's how I looped through the sliders:

$("yourSliderSelection").each (function () {
    var hs = $(this); 
    var options = $(this).slider('option');

    //reset the ui
    $(this).slider( 'values', [ options.min, options.max ] ); 

    //refresh/trigger event so that filter.js can reset handling the data
    hs.slider('option', 'slide').call(
        hs, 
        null, 
        {
            handle: $('.ui-slider-handle', hs),
            values: [options.min, options.max]
        }
    );

});

The hs.slider() code resets the data, but not the UI in my scenario. Hope this helps others.

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

I wanted to update slider as well as the inputbox. For me following is working

a.slider('value',1520);
$("#labelAID").val(1520);

where a is object as following.

 var a= $( "<div id='slider' style='width:200px;margin-left:20px;'></div>" ).insertAfter( "#labelAID" ).slider({
            min: 0,
            max: 2000,
            range: "min",
            value: 111,
            slide: function( event, ui ) {
				
                $("#labelAID").val(ui.value    );
            }
        });
		
        $( "#labelAID" ).keyup(function() {
            a.slider( "value",$( "#labelAID" ).val()  );
        });

In my case with jquery slider with 2 handles only following way worked.

$('#Slider').slider('option',{values: [0.15, 0.6]});

This worked for me but it's a custom implementation.

Set slider values

  $('#slider-width').slider('values', 0, range[ 0 ]);
  $('#slider-width').slider('values', 1, range[ 1 ]);
  setSliderHandles('width', range[ 0 ], range[ 1 ]);

Move handles in position

  function setSliderHandles(type, min, max){
    $('#slider-' + type + ' span.ui-slider-handle:eq(0) .price-range-min').html(min + '"');
    $('#slider-' + type + ' span.ui-slider-handle:eq(1) .price-range-max').html(max + '"');
    $('#slider-' + type + ' span.price-range-both').html('<i>' + min + '" - </i>' + max + '"');
    
    if ( min == max ) {
      $('#slider-' + type + ' span.price-range-both i').css('display', 'none');
      $('#single_' + type).val(min);
    } else {
      $('#slider-' + type + ' span.price-range-both i').css('display', 'inline');
      $('#single_' + type).val('');
    }

    if (collision($('#slider-' + type + ' span.price-range-min'), $('#slider-' + type + ' span.price-range-max')) == true) {
        $('#slider-' + type + ' span.price-range-min, #slider-' + type + ' span.price-range-max').css('opacity', '0');	
        $('#slider-' + type + ' span.price-range-both').css('display', 'block');		
    } else {
        $('#slider-' + type + ' span.price-range-min, #slider-' + type + ' span.price-range-max').css('opacity', '1');	
        $('#slider-' + type + ' span.price-range-both').css('display', 'none');		
    }        
  }

function collision($div1, $div2) {
    var x1 = $div1.offset().left;
    var w1 = 40;
    var r1 = x1 + w1;
    var x2 = $div2.offset().left;
    var w2 = 40;
    var r2 = x2 + w2;
      
    if (r1 < x2 || x1 > r2) return false;
    return true;
}

On start or refresh value = 0 (default) How to get value from http request

 <script>
       $(function() {
         $( "#slider-vertical" ).slider({
	animate: 5000,
	orientation: "vertical",
	range: "max",
	min: 0,
	max: 100,
	value: function( event, ui ) {
		$( "#amount" ).val( ui.value );
                                        
  //  build a URL using the value from the slider
  var geturl = "http://192.168.0.101/position";
                                            
  //  make an AJAX call to the Arduino
  $.get(geturl, function(data) {
  
  });
  },
	slide: function( event, ui ) {
		$( "#amount" ).val( ui.value );
                                        
  //  build a URL using the value from the slider
  var resturl = "http://192.168.0.101/set?points=" + ui.value;
                                            
  //  make an AJAX call to the Arduino
  $.get(resturl, function(data) {
  });
  }
  });

$( "#amount" ).val( $( "#slider-vertical" ).slider( "value" ) );

});
   </script>

Finally below works for me

$("#priceSlider").slider('option',{min: 5, max: 20,value:[6,19]}); $("#priceSlider").slider("refresh");

Here is working version:

var newVal = 10;
var slider = $('#slider');        
var s = $(slider);
$(slider).val(newVal);
$(slider).slider('refresh');