CODEWITHSUNDEEP
javascripthtml
Joey Yi Zhao
Joey Yi Zhao

Reputation: 42500

How to disable touch on input range only accept drag to change its value?

I have an HTML input as a type of range. Users can change its value by dragging the thumb. But users can also change its value by touching the track area which brings the thumb there directly. How can I disable the touching change value and only enable dragging?

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

If the thumb is on the "0" position, users can touch the middle of the input which moves the thumb around 50. I want to disable users touch on the track of the input and only allow users to drag the thumb to change its value.

Upvotes: 8

Views: 2689

Answers (2)

Patricio Vargas
Patricio Vargas

Reputation: 5522

Your CSS This works on chrome

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

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

Upvotes: 3

Prashant Pimpale
Prashant Pimpale

Reputation: 10697

If I understand correctly then might be what you are looking for is:

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

input[type=range]::-webkit-slider-thumb {
pointer-events:auto;
}
<input type="range" min="0" max="100" />

Upvotes: 7

Related Questions