Disable track on HTML5 range input

2020-03-08 06:18发布

I'm trying to find a way to prevent the user from clicking into the "track" portion of an HTML5 range input. Essentially, I only want the user to be able to use the "handle" to change the range value.

Is this even possible?

2条回答
Animai°情兽
2楼-- · 2020-03-08 06:56

It's possible through pointer-events at least on chrome.

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

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

This will disable clicking on the track and enable clicking only on slider thumbs.

查看更多
趁早两清
3楼-- · 2020-03-08 07:14

Adding disabled should work.

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

and then you can easily change the values using jQuery, like this:

$("#rangeindicator").val(1)
查看更多
登录 后发表回答