jQuery two sliders 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

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 2

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 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;
      }
     }
     });

});