Ionică Bizău Ionică Bizău - 4 months ago 23
CSS Question

Prevent ionRangeSlider to change the value after mouse out

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

Answer

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

check jsfiddle

Comments