jQuery UI Slider setting programmatically

Question

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

User · Answer

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

User · Answer

In my case with jquery slider with 2 handles only following way worked       Slider   slider  option   values   0 15  0 6

User · Answer

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       lt div id  slider  style  width 200px margin-left 20px   gt  lt  div gt     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

User · Answer

If you need change slider values from several input  use it   html    lt input type  text  id  amount  gt   lt input type  text  id  amount2  gt   lt div id  slider-range  gt  lt  div gt    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

User · Answer

Here is working version       var newVal   10  var slider       slider            var s     slider     slider  val newVal     slider  slider  refresh

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

On start or refresh value   0  default  How to get value from http request    lt script gt           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                lt  script gt

User · Answer

Finally below works for me      priceSlider   slider  option   min  5  max  20 value  6 19          priceSlider   slider  refresh

[jquery] jQuery UI Slider (setting programmatically)

Examples related to jquery

Examples related to jquery-ui