设置最小值或最大值后如何刷新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中修复

已邀请:

8 个回复

芯伶句餐绕

我不知道这是否是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\", \"min\", 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, 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());
});

响摔衅幸

您可以将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,
               values: [25, 75],
               min: 0,
               max: 100
             });
slider.slider(\"option\", \"min\", 25);

这些都在文档中列出

要回复问题请先登录或注册

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

8 个回复

发起人

max

slider

jquery

min

jquery_ui

问题状态

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

与内容相关的链接

8 个回复

发起人

max

slider

jquery

min

jquery_ui

问题状态