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

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.

• javascript
• html

• Can you provide code and the current behavior? and what you want to disable? – Prashant Pimpale Commented Oct 4, 2018 at 5:12
• 1 I updated my question. Could you let me know whether it makes sense? – Joey Yi Zhao Commented Oct 4, 2018 at 5:19
• It made sense to me even before you updated it. Unfortunately I have no idea how to do what you want to do except to implement your own range input – user128511 Commented Oct 4, 2018 at 5:20
• can you use jquery or need it on plan js? – Patricio Vargas Commented Oct 4, 2018 at 5:21
• 1 @PatricioVargas Yes Exactly, that why I posted the link but the answer was not accepted at the posted question so posted an answer – Prashant Pimpale Commented Oct 4, 2018 at 6:19

2 Answers 2

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

Your CSS This works on chrome

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

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