的jQuery UI的滑塊 - 如何阻止兩個滑塊從控制對方

Question

這是在參考了以前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 CurrentSlider ='slider';對任一滑塊的鼠標按下

，你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的可能工作。

巴德里的解決方案的工作，如果你更換

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

與

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