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를 직접 조작하여 피드백을 피합니다.

Answer 2

var furrentSlider = '슬라이더'를 저장할 수 있습니다.

슬라이더 중 하나의 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 UI의 변경으로 인해 모든 답변이 작동하지 않습니다.

Badri의 해결책은 교체하면 작동합니다

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

~와 함께

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