JQuery UI Slider (customizable)

Question

I want to change the sliders on the fly. I tried to do this using

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

This call will set values, but the item will not update the position of the slider. Call

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

doesn't help either.

Is there any other / better way to change the value and position of the slider?

Answer 1

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

If these are the values ​​in the current range that you want to change, then the .slider () method is the one you should use, but the syntax is slightly different from what you are using:

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

or if you have a slider with two handles, it will 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 this is the range you want to change, it will be:

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

Answer 2

For me, this triggers a slide event perfectly on the interface slider:

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

Remember to set the value to hs.slider('option', 'value',h); before the trigger. The Else slider handler will not synchronize with the value.

It should be noted that h is an index / position (not a value) if you use html select .

Answer 3

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

All I had to do was set the value of the base control, and then call the update method, as shown below:

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

Answer 4

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

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

Answer 5

You can manually trigger the following events:

Apply slider behavior to element

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

...

Set the slider value

 s.slider('value',10); 

Trigger slide event, transfer ui object

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

Answer 6

One part of @gaurav's solution worked for jQuery 2.1.3 and JQuery UI 1.10.2 with several sliders. My project uses four range sliders to filter data with this filter.js filter . Other solutions dropped the slider handles back to their original endpoints just fine, but apparently they didn't fire an event that filter.js understood. So this is how I looped on 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 flushes data, but not the user interface in my script. Hope this helps others.

Answer 7

I wanted to update the slider as well as the input field. For me, the following works

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

where a is an object as follows.

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

Answer 8

If you need change slider values ​​from multiple inputs, 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/

Answer 9

In my case, with the jquery slider with 2 handles, only the following method worked.

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

Answer 10

Finally, below it works for me

$ ("# priceSlider"). slider ('option', {min: 5, max: 20, value: [6.19]}); $ ("# PriceSlider") slider ("update").

Answer 11

When starting or updating value = 0 (default) How to get a value from an 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> 

Answer 12

Here is the working version:

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