Как реализовать обнаружение столкновений в компоненте JQuery UI Slider?

Question

У меня есть проект, в котором мне нужен пользовательский интерфейс слайдера, похоже, что ползунок Jquery выполняет свою работу но кажется, что когда у меня есть ползунок диапазона, то есть две ручки определяют диапазон:

У меня следующая проблема:

Я хочу, чтобы у маркеров было обнаружение столкновений, что означает, что маркеры не соприкасаются друг с другом и не перекрывают друг друга, а значения рассчитаны правильно, вот пример того, что происходит в стандартной конфигурации.

Я бы хотел, чтобы слайдер остановился следующим образом:

И надписи на этикетке: $ 62- $ 63

Я знаю, что это существует, я видел, как это сделано с плагином, чего мне не хватает.

Спасибо

Answer 1

Добавление обнаружения столкновения к событию слайда при первом создании слайдера:

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

Это предотвращает столкновение или наложение ручек.

Answer 2

Вы можете привязать к событию слайда и вернуть false, чтобы предотвратить слайд

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

Answer 3

Это известная ошибка с доступным патчем.Также другие пользовательские материалы, относящиеся к теме.