防止ionRangeSlider在鼠标移出后更改值

Question

在这个JSFiddle中，按住鼠标键并拖动到JSFiddle结果iframe之外。

然后松开按钮。将鼠标移到滑块上。然后，滑块值将被更改，而无需按住按钮。

如何防止这种行为？

代码非常简单：

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

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

Answer 1

首先，将ionRangeSlider分配给一个变量，读取docs

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

因此，滑块对象具有属性dragging: true

一次，您可以从主容器中鼠标移开，生成dragging: false

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

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

检查jsfiddle