如何禁用触摸输入范围仅接受拖动以更改其值？

Question

我有一个HTML输入作为range的一种类型。用户可以通过拖动拇指来更改其值。但是用户也可以通过触摸轨道区域来改变它的价值，这直接给用户带来了拇指。如何禁用触摸更改值并仅启用拖动？

​

<input type="range" min="0" max="100" />

​

如果拇指位于"0“的位置上，用户可以触摸输入的中间位置，从而将拇指移动到50左右。我希望禁用用户触摸输入的轨道，并且只允许用户拖动拇指以更改其值。

Answer 1

如果我的理解是正确的，那么你所要寻找的可能是：

​

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

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

<input type="range" min="0" max="100" />

​

Answer 2

您的CSS这是在铬上工作

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

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