在 HTML5 范围输入上禁用跟踪答案

【问题标题】：Disable track on HTML5 range input在 HTML5 范围输入上禁用跟踪
【发布时间】：2014-07-03 16:09:40
【问题描述】：

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

这可能吗？

【问题讨论】：

【解决方案1】：

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

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

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

这将禁止点击轨道，只允许点击滑块。

【讨论】：

同意。这确实有效，而且也是一种简单的方法
除非它似乎不再起作用。在 Windows 10 上使用 Chrome v62.0.3202.94，并在 CSS 中设置这些属性，或者通过 JQuery 在stackoverflow.com/questions/45647573/… 中设置这些属性似乎不再禁用轨道。正如torresomar 所建议的那样，在输入标签上设置禁用会禁用整个小部件，而不仅仅是轨道。

【解决方案2】：

添加禁用应该可以工作。

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

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

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

【讨论】：