I've got a control over the leaflet map div:

<div id="map">
    <div  style="z-index:9999; position: absolute; bottom:35px;left:10px;  id="divOpacity">
    <input type="range" style="width:80px" min="0" max="100" id="opacity_slider" name="opacity" />

I use this input range control to change the opacity of an imageOverview.

The problem is that when I try to drag the opacity, the map starts panning, and the range control do not move. The only way I can change the range value is to click on a specific point in the range and it changes without problem.

On a mobile device the problem is that there is no way to slide or click to change the range value. How can I prevent this behaviour and let the input range work also if over the leaflet map?

This is the code behind the :

$('#opacity_slider').on("change mousemove", function(e) {
     var newval=$(this).val();

The e.preventDefault() and L.DomEvent.disableClickPropagation(this); don't seem to do nothing.

1 Answer 1


Does this match what you're looking for? https://consbio.github.io/Leaflet.Range/


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.