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

Here is my try:

//First block control click + move event
var current_value = $("#slider").val();
$("#slider").on('mousedown', function(event) {
    $("#slider").on("mousemove", function (e) {
    if ($("#slider").val() == parseInt(current_value)+1
    || $("#slider").val() == parseInt(current_value)-1) {
      current_value = $(this).val();
    } else {
      $("#slider").val(current_value);
    }
    })
});

//Second block control click on line
$("#slider").on("mouseup", function() {
      if ($("#slider").val() == parseInt(current_value)+1
    || $("#slider").val() == parseInt(current_value)-1) {
      current_value = $(this).val();
    } else {
      $("#slider").val(current_value);
    }
})

NB : if you move to fast the slider, it will jump step, and then back to initial position.

JSFiddle : https://jsfiddle.net/xpvt214o/674502/