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

Question

内容:

我有一个 HTML5 范围输入 slider 。如果我使用 jQuery 更改所述 slider 的值， handle 的位置不会改变。这可以使用 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 example

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

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

jsFiddle example