设置最小值或最大值后如何刷新 jQuery UI 滑块？

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

提问by Manuel Leuenberger

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.

我有一个 ui.slider 并在运行时更改它的最小值和最大值。但是这些更改只会反映在视图中，当我之后也设置值时（这会导致它触发不需要的事件）。在我看来，它也应该在设置 min 和 max 后刷新视图。是否有一个简单的解决方法，似乎滑块缺少刷新方法。

$("#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

EditThis issue has been fixed in jQuery UI 1.9

编辑此问题已在 jQuery UI 1.9 中修复

回答by tsimbalar

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 :

我不知道这是否是 jQuery UI 滑块中的错误，但无论如何，您可以做的是更改当前值（从技术上讲，将当前值设置为当前值...）以强制刷新视图. 按照文档，这意味着做这样的事情：

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

回答by Hardik Thakkar

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

回答by Pinte Dani

Setting the minimum slider value like:

设置最小滑块值，如：

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

$slide.slider("option", "min", 25);对我不起作用。

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

相反，我使用了：$slide.slider("values", "0", 25);并且一切正常。

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

要设置最大滑块值，请使用 $slide.slider("values", "1", 75);

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

有关设置值的更多信息，请参阅 api 文档 - http://api.jqueryui.com/slider/#option-values

回答by Junaid Malik

You can update the html div in jquery function as

您可以将 jquery 函数中的 html div 更新为

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

然后将新值设置为滑块

回答by Pravesh Tiwari

Please try this:

请试试这个：

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

回答by Anand

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+'%');

回答by Le Droid

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:

这可能是版本问题，但我尝试使用“最小/最大”选项没有任何效果。这是可以的，并使用 JQuery UI 1.10 进行了测试。通过这种方式，您可以使用滑块或数字来更改另一个：

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

回答by Andrew

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

这都列在文档中