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?

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?

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

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