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

Posted 2023-02-18

【中文标题】设置最小值或最大值后如何刷新 jQuery UI 滑块？

【英文标题】：How to refresh a jQuery UI Slider after setting min or max values?

【发布时间】：2011-09-14 01:24:43

【问题描述】：

我有一个 ui.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

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

【参考方案1】：

请试试这个：

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

【参考方案2】：

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

然后为滑块设置新值

【参考方案3】：

设置最小滑块值，如：

$slide.slider("option", "min", 25); 不适合我。

我使用的是：$slide.slider("values", "0", 25);，一切正常。

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

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

【参考方案4】：

这可能是版本问题，但我尝试使用“最小/最大”选项没有任何效果。这没问题，并使用 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());
);

【参考方案5】：

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

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

【讨论】：

未捕获的错误：滑块小部件实例没有此类方法“刷新”

确定，我说的是 jQuery Mobile！

【参考方案6】：

试试这个。

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

【参考方案7】：

我不知道这是否是 jQuery UI 滑块中的错误，但无论如何，你可以做的是改变当前值（技术上，将当前值设置为当前值......）以强制视图被刷新。在the documentation 之后，这意味着做这样的事情：

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

【讨论】：

这也是我的第一次尝试，但这会触发更改事件等，因此不像我希望的那样美观;)。无论如何，谢谢，如果我不想修补滑块插件本身，这似乎是要走的路。

【参考方案8】：

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

var slider = $("#something").slider(
               range: true,
               values: [25, 75],
               min: 0,
               max: 100
             );
slider.slider("option", "min", 25);

这都列在Documentation

【讨论】：

不，不需要参考。设置最小值有效，但滑块的视觉状态不会改变。