Prevent ionRangeSlider to change the value after mouse out

Question

In this JSFiddle, hold down the mouse key and drag outside of the JSFiddle result iframe.

Then release the button. Move the mouse over the slider. Then, the slider value will be changed, without holding down the button.

How to prevent this behavior?

The code is pretty simple:

var $range = $(".js-range-slider");

$range.ionRangeSlider({
    type: "double",
    min: 100,
    max: 1000,
    from: 300,
    to: 800
});

score 2 · Accepted Answer · answered Jul 28 '16 at 19:01

First, assign ionRangeSlider to one variable, read docs

var slider = $(".js-range-slider").data("ionRangeSlider");

so, the slider object has the property dragging: true

once, you can mouseout from the main container, make dragging: false

var slider = $(".js-range-slider").data("ionRangeSlider");

$(".range-slider").mouseleave(function(){
  slider.dragging = false;
});

1 Answers1