使用具有相同句柄值且无重叠的 jQuery ui 范围滑块答案

【问题标题】：Use jQuery ui range slider with same handle values without overlap使用具有相同句柄值且无重叠的 jQuery ui 范围滑块
【发布时间】：2013-04-13 08:25:47
【问题描述】：

我正在使用 jQuery ui-slider。在范围滑块中，如果我使用两个手柄选择相同的范围，则一个手柄隐藏在另一个手柄后面。如果选择了相同的范围，我只想满足两个手柄。请帮助我。

$("#dvSliderRange2").slider({
    range: true,
    min: 0,
    max: 100,
    values: [20, 40],
    step: 10,
    slide: function(event, ui) {
        if (ui.values[0] == ui.values[1]) {
            return false;
        }
        $("#lblRange2").text(ui.values[0] + " - " + ui.values[1]);
    }
});

【问题讨论】：

如果值相同，它们应该重叠。如果您想一次查看两个处理程序，而不仅仅是使用 css 将它们一个向上和另一个向下放置，以便它们始终可用
您能否更具体地说明“满足两个手柄”的含义？
如果价格或时间相同，我希望它不应该重叠..
不重叠，好的。但那你想要它怎么办？有什么想法吗？

标签： jquery jquery-ui jquery-ui-slider

【解决方案1】：

我有一个使用下面一些 css 的解决方案。当它们相等时，这会向元素添加一个类。然后 Css 定位这些句柄，使它们都可见。

http://jsfiddle.net/dhQk/jTx89/

但是，在交互性的情况下。如果不对滑块代码进行一些修改，这是不可能的。我已经包含了来自 jquery 滑块 1.10.2 的 src。从 src 的第 176 行开始。

this.handles.each(function( i ) {
    var thisDistance = Math.abs( normValue - that.values(i) );
    if (( distance > thisDistance ) ||
        ( distance === thisDistance &&
            (i === that._lastChangedValue || that.values(i) === o.min ))) {
        distance = thisDistance;
        closestHandle = $( this );
        index = i;
    }
});

从这里可以看出，句柄实际上不是由您选择的句柄选择的，而是通过您单击的距离以编程方式选择的。不知道为什么决定他们会这样做，但是一旦它们具有相同的值，它就不允许您单独与它们进行交互；

【讨论】：

其实我刚刚想通了，他们这样做是为了让你可以点击栏的任意位置并开始滑动。