jQuery-ui Schieber - Wie zwei Schieberegler, um zu verhindern, sie zu steuern

Question

Dies ist in Bezug auf die Frage vorher gefragt

Das Problem hier ist, jede slider die andere steuert. Es ergibt sich Feedback.

Wie kann ich es vielleicht stoppen?

$(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

Dies ist eine Art von Hack, aber funktioniert:

$(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'));
    }
});

Grundsätzlich vermeiden Sie das Feedback durch die CSS direkt zu manipulieren, dass die Rutsche nicht Ereignis feuern.

Answer 2

Sie könnten einen var CurrentSlider speichern = 'Schieber';

auf mousedown- auf eine der beiden Schieber, stellen Sie den CurrentSlider Wert auf diesen Schieber,

und in Ihrem moveSlider (...) Methode geprüft werden, ob dies die CurrentSlider, wenn nicht, Sie den Schiebe (Vermeidung der Rückmeldung) nicht propagieren

Answer 3

Sie können nur einen optionalen Parameter zu Ihren moveSlider1 und moveSlider2 Funktionen geben, die, wenn sie auf einen wahren Wert gesetzt, die Rekursion unterdrückt.

Answer 4

Ein einfacher Ansatz, die Art eines Hybrid der oben genannten Antworten ist:

    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

versucht, dies jetzt und alle Antworten nicht funktionieren möglicherweise aufgrund von Änderungen an jquery ui.

Die Lösung von Badri funktioniert, wenn Sie ersetzen

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

mit

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