Input type range limit to grabbing handle only

Question

Is there a way of limiting the changing of a range value to dragging the handle only?

I want to disable the handle jumping to wherever I click on the range.

<input type="range" min="0" max="50">

Answer 1

CSS can be used for that. Apply pointer-events: none to the input and able them for the thumbs with pointer-events: all.

input[type="range"] {
  pointer-events: none;
}
input[type="range"]::-webkit-slider-thumb {
  pointer-events: all;
}
input[type="range"]::-moz-range-thumb {
  pointer-events: all;
}