如何在JQuery UI Slider组件中实现碰撞检测？

Question

我有一个需要滑块UI的项目，Jquery slider似乎可以完成这项工作 但似乎当我有一个范围滑块时，意味着两个手柄定义了一个范围：

我有以下问题：

我希望句柄具有碰撞检测功能，这意味着句柄不会相互接触，并且彼此不重叠，并且值正确计算，这是开箱即用配置中发生的事情的例子。

我希望滑块像这样停止：

标签为62- $ 63

我知道这个存在，我已经看到它完成了插件，我错过了什么。

谢谢

Answer 1

首次创建滑块时，将滑动事件添加到碰撞检测中：

$('.selector').slider({
    // setup
    slide: function(evt, ui) {
        if (ui.values[0] >= ui.values[1])
        return false;
    }
});

这可以防止手柄碰撞或重叠。

Answer 2

这是一个known bug，有一个可用的补丁。还有与该主题相关的其他用户提交。

Answer 3

您可以绑定到幻灯片事件并返回false以防止幻灯片

$( ".selector" ).bind( "slide", function(event, ui) {
    var values = $( ".selector" ).slider( "option", "values" );
    if (values[1] - values[0] < 10)
    return false;
});