如何在不使用Jquery UI的情况下动态移动HTML 5范围输入句柄

Question

什么:

我有一个HTML5范围输入滑块.如果我使用jQuery更改所述滑块的值,则句柄的位置不会改变.这可以使用jQuery UI框架中的.slider()方法来实现.但是,我想使用jQuery库实现相同的结果.

题:

如何使用jQuery 1.11.2或Javascript动态设置HTML 5范围输入的值并使句柄移动位置.

代码测试:

下面是我用来尝试解决问题的2段代码.

$("#rangeInput").attr("value", "100");

$("#rangeInput").val("100")

表格:

    <form id="noisePolForm">
<input id="rangeInput" type="range" value="0" step="3" min="80" max="140" class="noisePol">
    </form>

Answer 1

您需要使用.prop()，而不是.attr()：

$("#rangeInput").prop("value", "100"); //Or $("#rangeInput").prop("value", 100);

jsFiddle示例

您的第二个示例工作正常，您只是忘记了 #

$("#rangeInput").val("100") //Or $("#rangeInput").val(100)

jsFiddle示例