jQuery-ui slider - How to stop two sliders from controlling each other

Question

This is in reference to the question previously asked

The problem here is, each slider controls the other. It results in feedback.

How do I possibly stop it?

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

This is sort of a hack, but works:

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

Basically, you avoid the feedback by manipulating the css directly, not firing the slide event.

Answer 2

You could store a var CurrentSlider = 'slider';

on mousedown on either of the sliders, you set the CurrentSlider value to that slider,

and in your moveSlider(...) method you check whether this is the CurrentSlider, if not, you don't propagate the sliding (avoiding the feedback)

Answer 3

You could just give an optional parameter to your moveSlider1 and moveSlider2 functions that, when set to a true value, suppresses the recursion.

Answer 4

A simpler approach which is kind of a hybrid of the above answers:

    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

Tried this now and all answers do not work possibly due to changes to jquery ui.

The solution of Badri works if you replace

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

with

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