javascript - Jquery移动双范围滑块重新加载新范围

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