如何在设置最小值或最大值后刷新jQuery UI Slider？

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

Edit This issue has been fixed in jQuery UI 1.9

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

8 个解决方案

#1

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

#2

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

#3

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

#4

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

#5

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:

它可能是一个版本问题，但我尝试选项“min / max”工作没有。这是可以的，并使用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());
});

#6

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

然后将新值设置为滑块

#7

Please try this:

请试试这个：

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

#8

-3

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

这些都列在文档中

#1

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

#2