Prevent mousedown event on input range html element and still let user drag slider

Question

So is there a way to disable mousedown and / or click event on input range element but at the same time let user drag slider around and still fire on change event?

Disabl

Answer 1

You can use CSS pseudos-classes to give the thumb of the input pointer-events:auto (allow mouse events) and give the rest of the range input pointer-events: none (do not allow mouse events).

The documentation for pointer-events states that:

The pointer-events CSS property specifies under what circumstances (if any) a particular graphic element can become the target of mouse events.

Pointer-Events: auto

The element behaves as it would if the pointer-events property were not specified. In SVG content, this value and the value visiblePainted have the same effect.

Pointer-Events: none

The element is never the target of mouse events; however, mouse events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, mouse events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases.

input[type=range]{
  pointer-events: none;
}
input[type=range]::-webkit-slider-thumb{/*Webkit Browsers like Chome and Safari*/
  pointer-events: auto;
}
input[type=range]::-moz-range-thumb{/*Firefox*/
  pointer-events: auto;
}
input[type=range]::-ms-thumb{/*Internet Explorer*/
  pointer-events: auto;
}