如何实现jQuery UI双滑块手柄不交叉（允许值相等）

完全可以实现这个需求！你只需要在滑块的slide事件里添加逻辑限制，同时给输入框的修改也加上校验，就能确保右侧手柄的值永远不会小于左侧手柄的值（允许两者相等）。

修改后的完整代码 #

JavaScript

$(document).ready(function() {
  $('#slider').slider({
    min: 0,
    max: 4,
    step: .1,
    values: [0, 4],
    slide: function(event, ui) {
      var leftVal = ui.values[0];
      var rightVal = ui.values[1];
      
      // 限制左侧手柄不超过右侧，右侧不小于左侧
      if (ui.handleIndex === 0) {
        // 拖动左侧手柄时，不能超过当前右侧的值
        leftVal = Math.min(leftVal, $(this).slider('values', 1));
      } else {
        // 拖动右侧手柄时，不能低于当前左侧的值
        rightVal = Math.max(rightVal, $(this).slider('values', 0));
      }
      
      // 更新滑块值和输入框
      $(this).slider('values', [leftVal, rightVal]);
      $('input.value[data-index=0]').val(leftVal);
      $('input.value[data-index=1]').val(rightVal);
      
      // 返回false阻止默认滑动（因为我们已经手动更新了值）
      return false;
    }
  });

  $('input.value').change(function() {
    var $this = $(this);
    var index = $this.attr('data-index');
    var newValue = parseFloat($this.val());
    var otherIndex = index === '0' ? 1 : 0;
    var otherValue = parseFloat($('#slider').slider('values', otherIndex));
    
    // 校验值的合理性，确保右侧不小于左侧
    if (index === '0') {
      newValue = Math.min(newValue, otherValue);
    } else {
      newValue = Math.max(newValue, otherValue);
    }
    
    // 确保值在min和max范围内
    newValue = Math.max(0, Math.min(4, newValue));
    
    // 更新滑块和输入框
    $('#slider').slider('values', index, newValue);
    $this.val(newValue);
  });
});

CSS

#slider { margin-bottom:20px; }
input[data-index="1"] { float:right; }

HTML

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<div id="slider"></div>
<div>
  <input type="text" class="value" data-index="0" value="0" />
  <input type="text" class="value" data-index="1" value="4" />
</div>

关键逻辑说明 #

• 滑块拖动时：通过ui.handleIndex判断当前拖动的是哪个手柄，对拖动后的值做限制：

  • 左侧手柄不能超过右侧手柄的当前值
  • 右侧手柄不能低于左侧手柄的当前值
    之后手动更新滑块值并返回false，阻止默认的滑动行为（避免出现交叉）

• 输入框修改时：同样判断修改的是哪个输入框，对输入的值做大小校验，同时确保值在min(0)和max(4)范围内，避免用户输入非法值。

这样就能完美实现你要的效果——右侧手柄永远不会越过左侧，两者可以取相同的值。

内容的提问来源于stack exchange，提问作者user13286