Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

I have a ui.slider and change it's 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

like image 806
Manuel Leuenberger Avatar asked Jun 13 '11 16:06

Manuel Leuenberger


People also ask

How to reset slider value In jQuery?

You should try doing something like this : $(function() { var $slide = $("#something"). slider({ range: true, values: [25, 75], min: 0, max: 100 }); $slide.

How to refresh the slider In javascript?

Syntax: $( ". selector" ). slider("refresh");

What is jQuery slider?

jQuery UI slider is used to obtain a numeric value within a certain range. The main advantage of slider over text input is that it becomes impossible for the users to enter an invalid value. Every value they can pick with the slider is valid.


2 Answers

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 });   
like image 57
tsimbalar Avatar answered Oct 11 '22 00:10

tsimbalar


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."); } 
like image 27
Hardik Thakkar Avatar answered Oct 11 '22 00:10

Hardik Thakkar