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

如何解决设置最小值或最大值后如何刷新jQuery UI 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

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

解决方法

        我不知道这是否是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
});  

    ,        破解了句柄重定位问题...只需调用此函数即可。

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

    ,        设置最小滑块值，例如：

$slide.slider(\"option\",25);

对我不起作用。 相反，我使用了：ѭ4used，一切正常。 要设置最大滑块值，请使用

$slide.slider(\"values\",\"1\",75);

有关设置值的更多信息，请参见api文档-http://api.jqueryui.com/slider/#option-values     ,        尝试这个。

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

    ,        这可能是一个版本问题，但我尝试使用选项“最小/最大”进行的操作均无效。可以，并且已使用JQuery UI 1.10进行了测试。这样，您可以使用滑块或数字来更改另一个：

$(\"#mySlider\").slider({range: true,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\",$(\"#mySliderMin\").val());
   $(\"#mySlider\").slider(\"values\",1,$(\"#mySliderMax\").val());
});

    ,        您可以将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;

然后将新值设置为滑块     ,        请尝试以下方法：

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

    ,        您需要保留对滑块对象的引用，

var slider = $(\"#something\").slider({
               range: true,max: 100
             });
slider.slider(\"option\",25);

这些都在文档中列出