Disable track on HTML5 range input

Question

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 \"han

Answer 1

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.