限制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的滑块到另一个滑块

回答

相关问题