禁用HTML5范围输入的跟踪

Question

我正试图找到一种方法来阻止用户点击HTML5范围输入的“轨道”部分。基本上，我只希望用户能够使用“句柄”来更改范围值。

这甚至可能吗？

Answer 1

至少在chrome上可以通过指针事件来实现。

input[type=range] {
pointer-events: none;
}

input[type=range]::-webkit-slider-thumb {
pointer-events:auto;
}

这将禁用单击轨道并启用仅在滑块上单击。

Answer 2

添加禁用应该有效。

<input id="rangeindicator" disabled type="range" name="points" min="1" max="10">

然后您可以使用jQuery轻松更改值，如下所示：

$("#rangeindicator").val(1)