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

How to dynamically move HTML 5 range input handle without using Jquery UI

本文关键字：动态 情况下 移动 范围 句柄 输入 HTML5 UI Jquery      更新时间：2023-09-26

内容：

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

问题：

如何使用jQuery1.11.2或Javascript动态设置HTML5范围输入的值并使句柄移动位置。

代码尝试：

下面是我用来解决这个问题的两段代码。

$("#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>

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

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

jsFiddle示例

您的第二个示例运行良好，您只是忘记了#

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

jsFiddle示例

相关文章：