Слайдер пользовательского интерфейса JQuery с несколькими ручками: как предотвратить пересечение ручек?

В событии слайда вы можете ограничить движение ручки, проверив значения ползунка и вернув значение true, чтобы разрешить слайд, или false, чтобы предотвратить его (дополнительную информацию см. в документации пользовательского интерфейса jQuery).

Какой код вы используете для ползунка Jquery? Глядя на демонстрацию ползунка диапазона, он имеет две ручки, и их невозможно пересечь.

Как указал @madcapnmckay, если у вас есть ползунок с двумя ручками и range: true в параметрах, ручки нельзя перетаскивать друг за другом.

У меня была проблема, когда он не ограничивал должным образом, но оказалось, что у меня была строка 'true' вместо логического true

Я немного опоздал на вечеринку, но я хотел поделиться своим самым компактным, но удобочитаемым способом сделать это. Технически это очень похоже на ответ @tototresde.

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

Проверьте это решение:

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