Question

滑块适用于初始范围。这是滑块的html，初始范围是0到100

 <div data-role="rangeslider">       
    <input type="range" name="range-1a" id="range-1a" min="0" max="100" value="40">       
    <input type="range" name="range-1b" id="range-1b" min="0" max="100" value="80">
</div>

<button id="btnReload" onclick="reloadRangeSlider(200, 300)"></button>

我想实现一个javascript函数，可以帮助重新加载滑块的新范围，如200到300.在我的情况下，想要通过点击btnRelaod按钮重新加载滑块。

function reloadRangeSlider(min, max){
    //To do: reload functionality goes here 
}

Answer 1

以下是我的问题的答案

function reloadRangeSlider(min, max){
       $('#range-1a').attr("min", min).attr("max", max).val(min);
       $('#range-1b').attr("min", min).attr("max", max).val(max);          
       $('#range-1a').slider("refresh");
       $('#range-1b').slider("refresh");         
    }

Answer 2

根据JQuery Mobile Docs 如果您通过JavaScript操作滑块，则必须在其上调用refresh方法以更新视觉样式。这是一个例子：

$("#yourSlider").attr("min", min)
$("#yourSlider").attr("max", max)
$("#yourSlider").slider("refresh");

或者您可以使用

$("#yourSlider").attr("min", min).attr("max", max).slider("refresh");

Jquery移动双量程滑块重新加载新系列

2 个答案: