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 could use pure CSS

#slider {
    pointer-events: none;
}

Answer 2

Why not use "mouseup" instead of "click"?

$("#slider").on('mousedown', function(event) {
    //event.preventDefault();
    /* Act on the event */
    console.log("mousedown", this.value);
});
 $("#slider").on('mouseup', function(event) {
    //event.preventDefault();
    /* Act on the event */
    console.log("mouseup", this.value);
});

Is this what you are trying to accomplish? Experiment with the fiddle if you'd like. :-)

Answer 3

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/

Answer 4

Here's a pure CSS solution

You can control parts of the range with CSS and in that way disable the pointer events for all of those parts them except the thumb of the slider. In this way, click events are only registered when the button of the slider is clicked.

pointer-events: none;          // disable all event on the range

Use the pseudo-class selectors to target the thumb and cover all major browsers like this.

input[type=range]::-webkit-slider-thumb {   // support webkit (e.g. Chrome/Safari)
input[type=range]::-moz-range-thumb {       // support for Firefox
input[type=range]::-ms-thumb                // support for IE 

Here's how that would look in action.

$("#slider").on('mousedown', function(event) {
  console.log('Mouse-down: only fired when thumb of the range is clicked');
});
$("#slider").on('mouseup', function(event) {
  console.log('Mouse-up: only fired when thumb of the range is clicked');
});

input[type=range] {
  pointer-events: none;
}

input[type=range]::-webkit-slider-thumb {
  pointer-events: auto;
}

input[type=range]::-moz-range-thumb {
  pointer-events: auto;
}

input[type=range]::-ms-thumb {
  pointer-events: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="slider" name="slider" type="range" value="-1" min="-1" max="30" step="1" />

More information on pointer-events can be found in the MDN docs.

Answer 5

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;
}

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