带有多个句柄的jquery ui滑块:如何阻止句柄交叉?

在幻灯片事件中,您可以通过检查滑块值并返回“真”以允许幻灯片移动,或者返回“假”以防止幻灯片移动(有关详细信息,请参阅jquery UI文档)。

您在为jquery滑块使用什么代码?看着 range slider demo ,它有两个手柄,不能交叉。

正如@madcapnmckay指出的那样,如果您有一个带两个手柄的滑块和 range: true 在选项中,不能将句柄相互拖动。

我遇到了一个问题,它没有适当地约束,但结果发现我有一根绳子。 'true' 而不是布尔值 true

检查此解决方案:

slide : function( event, ui ) {
        //Actual Handle Selected
        var handleIndex = $(ui.handle).index()-1;

        var diffA, diffB;

        //Check with right handles
        if(handleIndex > 0)
            diffA = ui.values[handleIndex] - ui.values[handleIndex-1];

        //Check with left handles
        if(handleIndex < ui.values.length-1)
            diffB = ui.values[handleIndex+1] - ui.values[handleIndex];

        if (diffA <= 0 || diffB <= 0) { /*checks for the values and compares*/
            return false;
        }
   }

我来参加聚会有点晚了,但我想和大家分享一下我最简洁易读的方式。从技术上讲,这与@totresde的答案非常相似。

slide: function (e, ui) {
  // Prevent crossing and overlapping of slider handles.
  if (ui.values[(ui.handleIndex - 1)] >= ui.value ||
      ui.values[(ui.handleIndex + 1)] <= ui.value) {
    return false;
  }
}