Слайдер jQuery-ui – как запретить двум ползункам контролировать друг друга

Question

Это применительно к вопрос ранее заданный

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

Как мне это остановить?

$(function() {
    $("#slider").slider({ slide: moveSlider2 });
    $("#slider1").slider({ slide: moveSlider1 });
    function moveSlider2( e, ui ) 
    {
        $('#slider1').slider( 'moveTo', Math.round(ui.value) );
    }

    function moveSlider1( e, ui ) 
    {
        $('#slider').slider( 'moveTo', Math.round(ui.value) );
    }
});

Answer 1

Это что-то вроде взлома, но работает:

$(function () {
    var slider = $("#slider");
    var slider1 = $("#slider1");
    var sliderHandle = $("#slider").find('.ui-slider-handle');
    var slider1Handle = $("#slider1").find('.ui-slider-handle');

    slider.slider({ slide: moveSlider1 });
    slider1.slider({ slide: moveSlider });

    function moveSlider( e, ui ) {
        sliderHandle.css('left', slider1Handle.css('left'));
    }

    function moveSlider1( e, ui ) {
        slider1Handle.css('left', sliderHandle.css('left'));
    }
});

По сути, вы избегаете обратной связи, напрямую манипулируя css, не вызывая событие slide.

Answer 2

Вы можете сохранить переменную CurrentSlider = 'slider';

в mousedown на любом из ползунков вы устанавливаете значение CurrentSlider для этого ползунка,

и в вашем методе moveSlider (...) вы проверяете, является ли это CurrentSlider, если нет, вы не распространяете скольжение (избегая обратной связи)

Answer 3

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

Answer 4

Более простой подход, который является своего рода гибридом приведенных выше ответов:

    var s1 = true;
    var s2 = true;
    $('#slider').slider({
        handle: '.slider_handle',
        min: -100,
        max: 100,
        start: function(e, ui) {
        },
        stop: function(e, ui) { 
        },
        slide: function(e, ui) {
            if(s1)
            {
                s2 = false;
                $('#slider1').slider("moveTo", ui.value);
                s2 = true;
            }
        }
    });


    $("#slider1").slider({ 
        min: -100, 
        max: 100,
        start: function(e, ui) {
        },
        stop: function(e, ui) { 
        },
        slide: function(e, ui) {
            if(s2)
            {
                s1 = false;
                $('#slider').slider("moveTo", ui.value);
                s1 = true;
            }
        }
        });

});

Answer 5

Попробовал это сейчас, и все ответы не работают, возможно, из-за изменений в пользовательском интерфейсе jquery.

Решение Бадри работает, если заменить

$('#slider').slider("moveTo", ui.value);

с

$('#slider').slider("option", "value", ui.value);