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

html, javascript, jquery

Solution

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).

See: `pointer-events`

input[type=range]{
  pointer-events: none;
}
input[type=range]::-webkit-slider-thumb{/*Webkit Browsers like Chrome 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;
}

<input type="range" value="0" min="0" max="100"/>

Problem

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? Disable clicking on line but still enable slider to be dragged around. I would like to prevent users to jump (with mousedown / click) in the middle of slider but I wanna let them drag it so value changes. ``` <input id="slider" name="slider" type="range" value="-1" min="-1" max="30" step="1" /> ``` This does not help as on change for range gets called and messes up numbers. ``` $slider.on('mousedown', function(event) { //event.preventDefault(); this.value = -1; /* Act on the event */ console.log("mousedown"); }); $slider.on('click', function(event) { event.preventDefault(); this.value = -1; /* Act on the event */ console.log("click"); }); ``` If I call `event.preventDefault();` on mousedown slider does not work and can not be dragged around. Is there a way around that. I am trying to recreate this effect in html is there any jQuery effect for this kind a zoom?

Original source