CODEWITHSUNDEEP
jqueryjquery-uislidermaxmin
Manuel Leuenberger
Manuel Leuenberger

Reputation: 2367

How to refresh a jQuery UI Slider after setting min or max values?

I have a ui.slider and change its min and max values on runtime. But these changes only get reflected in the view, when I set the values afterwards too (which causes it to fire events that are not needed). In my opinion, it should refresh the view after setting min and max too. Is there a simple workaround, seems like a refresh method is missing for the slider.

$("#something").slider({
    range: true,
    values: [25, 75],
    min: 0,
    max: 100
});
$("#something").slider("option", "min", 25); // left handle should be at the left end, but it doesn't move
$("#something").slider("option", "values", [25, 75]); // the left handle is now at the left end, but doing this triggers events

Edit This issue has been fixed in jQuery UI 1.9

Upvotes: 25

Views: 56368

Answers (10)

Yogesh Rajbhar
Yogesh Rajbhar

Reputation: 12

Try adding a callback

$( ".price-range-slider" ).slider({
  range: true,
  min: 1,
  max: 500,
  values: [ 10, 50 ],
  slide: function( event, ui ) {
    $( "input.property-amount" ).val( "₹" + ui.values[ 0 ] + " Lac - ₹" + ui.values[ 1 ] + " Lac" );
    console.log($("input.property-amount").val());
  },
  change: function( event, ui ) {
    console.log(ui.values);
    console.log('fn called');
  }
});

Upvotes: 0

Vidar
Vidar

Reputation: 1238

You can re-create the slider by first removing it with:

$('.slider').slider('destroy')

and then set up your slider again with the correct options.

Upvotes: 0

Pravesh Tiwari
Pravesh Tiwari

Reputation: 157

Please try this:

$("#Slider2").slider("value", 10, 1000); //10 = min and 1000 = max

Upvotes: 0

Junaid Awan
Junaid Awan

Reputation: 149

You can update the html div in jquery function as

var d='<div class="row grid_slider"><div><p>Grid With time in 24 hour format</p><input type="text" class="range_time24" value="" name="range" /></div></div>';document.getElementById("slider").innerHTML=d;

Then set new values to slider

Upvotes: 0

Pinte Dani
Pinte Dani

Reputation: 2049

Setting the minimum slider value like:

$slide.slider("option", "min", 25); does not work for me.

Instead I used: $slide.slider("values", "0", 25); and everything is working fine.

For setting the maximum slider value, use $slide.slider("values", "1", 75);

For more information on setting values, see the api docs - http://api.jqueryui.com/slider/#option-values

Upvotes: 1

Le Droid
Le Droid

Reputation: 4774

It could be a version issue but nothing I tried with options "min / max" worked. This is OK and tested with JQuery UI 1.10. This way you can use either the slider or the numbers to change the other one:

$("#mySlider").slider({range: true, min: 0, max: 100, values: [ 0, 100 ], step: 10,
   slide: function( event, ui ) {
      $("#mySliderMin").val( ui.values[ 0 ]);
      $("#mySliderMax").val( ui.values[ 1 ]);
   }
});
$("#mySliderMin").val($("#mySlider").slider( "values", 0 ));
$("#mySliderMax").val($("#mySlider").slider( "values", 1 ));
$("#mySliderMin, #mySliderMax").change(function () {
   $("#mySlider").slider("values", 0, $("#mySliderMin").val());
   $("#mySlider").slider("values", 1, $("#mySliderMax").val());
});

Upvotes: 0

Hardik Thakkar
Hardik Thakkar

Reputation: 394

Cracked the handle reposition issue... just call this function..

function resetSlider(){
    $("#slider-fill").attr('value',maxPrice);
    $("input[type='range']").slider( "refresh" );//refresh slider to max value
    $(".ui-slider-handle").css("left","100%");
    console.log("Slider Reset Done.");
}

Upvotes: 2

Anand
Anand

Reputation: 11

Try this.

valPercent = (current_slide_value - min_value) / (max_value - min_value) * 100;     
parentElem.find('.ui-slider-range').css('width', valPercent+'%');    
parentElem.find('.ui-slider-handle').css('left', valPercent+'%');

Upvotes: 0

tsimbalar
tsimbalar

Reputation: 5990

I don't know whether this is a bug in the jQuery UI slider, but anyway, what you can do is change the current value (technically, setting the current value to the current value...) to force the view to be refreshed. Following the documentation, this would mean doing something like this : 

$(function() { 
    var $slide = $("#something").slider({
        range: true,
        values: [25, 75],
        min: 0,
        max: 100
    });
    $slide.slider("option", "min", 25); // left handle should be at the left end, but it doesn't move
    $slide.slider("value", $slide.slider("value")); //force the view refresh, re-setting the current value
});

Upvotes: 29

Andrew
Andrew

Reputation: 13853

You need to keep a reference to your slider object,

var slider = $("#something").slider({
               range: true,
               values: [25, 75],
               min: 0,
               max: 100
             });
slider.slider("option", "min", 25);

This is all listed in the Documentation

Upvotes: -3

Related Questions