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

Question

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.

Answer 1

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" />

Answer 2

Your CSS This works on chrome

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

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