限制jQuery的滑塊到另一個滑塊

我工作的情況，當我有，我在這裏花了兩年的jQuery滑塊控件的值： http://jqueryui.com/demos/slider/#rangemin 限制jQuery的滑塊到另一個滑塊

我需要根據其他值，以便限制一個他們沒有重疊。我想出了下面的代碼。它的工作，除了一個非常惱人的問題 - 當我拖動滑塊時，他們會在我拖着它們時經過另一個滑塊，只有當我釋放鼠標按鈕時才恢復到限制值。

純屬偶然，我找到了添加ui.someunknownmethod（'1'）的解決方案;下面一行。

所以我的問題是，我可以保持這一行而不會造成任何問題？

<style type="text/css"> 
    body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;} 

    #slider1 .ui-slider-range { background: #8ae234; } 
    #slider2 .ui-slider-range { background: #729fcf; } 

    #sliderContainer{ 
     width: 400px; 
     margin: 6px 0px; 
    } 


</style>  
    </head> 

    <body> 

     <!-- Slider --> 
     <div id="sliderContainer"> 
     <div id="slider1"></div> 
     </div> 
     <div id="sliderContainer"> 
     <div id="slider2"></div> 
     </div> 

     <span id="txt">-</span> 
     <span id="txt2">-</span> 

    <script> 
    $(function(){ 
     $("#slider1").slider({ 
      orientation: "horizontal", 
      range: "max", 
      max: 255, 
      value: 50, 
      slide: refresh1, 
      change: refresh1 
     }); 
     $("#slider2").slider({ 
      orientation: "horizontal", 
      range: "max", 
      max: 255, 
      value: 30, 
      slide: refresh2, 
      change: refresh2 
     }); 
    }); 

    function refresh1(e, ui) 
    { 
     var slider2 = $("#slider2"); 

     var v1 = ui.value; 
     var v2 = slider2.slider('value'); 

     if(v1 < v2) 
     { 
      $("#slider1").slider('value', v2); 

      //This is the line that "saves the day" 
      ui.someunknownmethod('1'); 
     } 

     $("#txt").text(v1); 
    } 
    function refresh2(e, ui) 
    { 
     var slider1 = $("#slider1"); 

     var v1 = slider1.slider('value'); 
     var v2 = ui.value; 

     if(v2 > v1) 
     { 
      $("#slider2").slider('value', v1); 

      //This is the line that "saves the day" 
      ui.someunknownmethod('1'); 
     } 

     $("#txt2").text(v2); 
    } 

    </script> 
    </body>

編輯：不要使用拋出未處理的異常的方法 - 它會在大多數瀏覽器中運行，當然，除了舊的IE的其中瀏覽器將顯示一個消息框彈出每個遇到錯誤。這對於用戶來說會很煩人！

到目前爲止，我無法找到我要找的，（從此改寫滑塊UI代碼得很開），所以如果有人發現了它，請在這裏發表吧...

來源

2011-11-24 ahmd0

你可以做像

$("#slider2").slider("option", "min", 25);

或

$("#slider2").slider("option", "max", 25);

看到http://jqueryui.com/demos/slider/#methods信息/方法

來源

2011-11-24 10:25:23

它不會限制滑塊的位置，它只是設置它的最小範圍值，但滑塊頭尚可。物理上被拖動到滑塊的左側/右側。 – ahmd0

閱讀the API，似乎你可以在滑塊已經被初始化後改變「min」和「max」。所有你需要做的就是保持slider1「min」選項等於slider2「max」選項，只要其中一個被拖動就更新。

來源

2013-01-09 18:37:36 barboaz

這裏是我的2美分（主slider將更新子slider的min value：

jQuery(function($){ 

    var handle1 = $("#sub"); 
    $("#sub-slider").slider({ 
     min: 12, 
     max: 28, 
     create: function() { 
      handle1.text($(this).slider("value")); 
     }, 
     slide: function(event, ui) { 
      handle1.text(ui.value); 
     } 
    }); 

    //#menu-line 

    var handle = $("#main"); 
    var main_val; 
    $("#main-slider").slider({ 
     min: 16, 
     max: 36, 
     create: function() { 
      handle.text($(this).slider("value")); 
     }, 
     slide: function(event, ui) { 
      handle.text(ui.value); 
      main_val = ui.value; 
      $("#sub").text(main_val); 
      $("#sub-slider").slider('option', 'min', main_val); 
     } 
    }); 

});

來源

2018-03-01 21:49:08 Jadeye

限制jQuery的滑塊到另一個滑塊

回答

相關問題