如何在设置最小值或最大值后刷新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..
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);
不适合我。
相反,我使用: $slide.slider("values", "0", 25);
一切都很好。
要设置最大滑块值,请使用$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+'%');
它可能是一个版本问题,但我尝试选项“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()); });
您可以将jquery函数中的html div更新为
var d='
';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);
这些都列在文档中