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?

alexteg · Accepted Answer · 2011-03-22T15:11:39.213

154

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

edited Mar 22 '11 at 15:11

answered May 14 '10 at 10:51

alexteg

2,830
4
24
21

7

that works so far, but it's not executing the event handler. The event handler updates some span's on sliding. It seems like I can't trigger the slide event manually ? – jAndy May 14 '10 at 11:18
1

ive tried both .slider('value', 100) and .slider('option', 'value', 100) and the slider does not move. am i mistaken in thinking it SHOULD move? or does this just change the VALUE, and i have to refresh or something to actually SEE the slider move? didnt want to ask a repeat question when it seems like this answer is so close to what i actually need. – trh178 Mar 11 '11 at 15:56
2

If you have a range slider you need to use the index integer (start 0) of the handle which you want to move. So to move the first handle (index 0) to 50 use $("#slider").slider('values',0,50); If you want to move the second slider (index 1) to 50 use $("#slider").slider('values',1,50); – alexteg Mar 22 '11 at 15:10
4

@jAndy setting the slider values will call the `change` event handler, not the `slide` event handler. – Igor Mukhin Jun 06 '13 at 13:35
6

you can also set a range slider with an array like so: $("#slider").slider('values', [50,80]); – tObi Jul 06 '14 at 18:01
What worked for me was to set `$("#slider").slider('value', 50, 80);` – Alonso Urbano Jun 28 '17 at 16:46

score 16 · Answer 2 · edited Dec 19 '17 at 11:48

16

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.

edited Dec 19 '17 at 11:48

Imran Zahoor

2,521
1
28
38

answered Nov 04 '10 at 11:06

sakhunzai

13,900
23
98
159

This solution worked perfectly for me using jQuery UI 1.8.24. – Александр Фишер Jan 28 '13 at 12:33
1

For me too... only this solution worked.. jQuery 1.8.3 and jQuery UI 1.9.2 I mean from @alexteg's answer, values were being set properly but the slider was not sliding. – Gaurav Pandey Aug 05 '13 at 08:19
A modified script for the range slider would be like: `$('#minPrice, #maxPrice').blur(function() { var max = parseInt($('#maxPrice').val()); var min = parseInt($('#minPrice').val()); if (min > max) return false; var hs = $("#slider-range"); hs.slider("values", 0, min); hs.slider("values", 1, max); hs.slider('option', 'slide').call(hs, null, {handle: $('.ui-slider-handle', hs), values: [min, max]}); });` Where #minPrice and #maxPrice are two text boxes. – Gaurav Pandey Aug 05 '13 at 08:21

score 9 · Answer 3 · answered Jul 07 '12 at 23:59

9

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

answered Jul 07 '12 at 23:59

Mal

123
1
2

2

Is this working for you? Can't find anything about it [in the docs](http://api.jqueryui.com/slider/#method-option) and I can't get it working. – Markus Hedlund Jul 08 '13 at 08:33
10

Report an `Error: no such method 'refresh' for slider widget instance` error in chrome – Xiao Hanyu Jan 24 '14 at 09:14
1

Works for my setup with JQ 2.1.0 + JQM 1.4.2. – metamagikum Mar 30 '14 at 03:42
1

All in one line... `$("#slider").val(50).slider("refresh");` – PaulR Dec 01 '14 at 01:00
thank you its very useful for me.. i put one upvote for you:) – vijay Feb 23 '15 at 07:30
it's working for me too but still throws an error that '.slider is not a function' – Markus Dec 02 '22 at 16:27

score 5 · Answer 4 · answered Jul 09 '12 at 10:56

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

score 3 · Answer 5 · answered Jul 03 '16 at 13:28

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/

Thanks, saved me a lot of time. Here is a Max Range version https://jsfiddle.net/jpcodes/dvumhes1/ — Jim Padilla, Apr 13 '18 at 18:47

score 3 · Answer 6 · answered Aug 05 '16 at 22:47

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.

I had to scroll all the way right here to get the correct answer. Thank you. — Tomáš Zato, Nov 27 '17 at 13:34

score 2 · Answer 7 · answered Sep 07 '10 at 08:23

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

score 1 · Answer 8 · answered Sep 02 '12 at 18:41

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

score 1 · Answer 9 · answered Feb 14 '19 at 23:43

1

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

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

answered Feb 14 '19 at 23:43

Jonzi

141
1
2
13

score 0 · Answer 10 · answered May 10 '21 at 14:55

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

score -1 · Answer 11 · answered Dec 27 '18 at 16:18

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>

score -1 · Answer 12 · answered May 20 '19 at 10:58

-1

Finally below works for me

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

answered May 20 '19 at 10:58

Vijay Chauhan

367
3
7

score -3 · Answer 13 · answered Sep 02 '13 at 16:33

-3

Here is working version:

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

answered Sep 02 '13 at 16:33

nvvetal

1,756
1
17
19

1

Plenty of answers with the same code, you just garbled it from copy pasting. – Rafael Herscovici Feb 26 '15 at 16:21

jQuery UI Slider (setting programmatically)

13 Answers13

Linked

Related