带有 2 个手柄的 jQuery UI 滑块 - 防止交叉答案

【问题标题】：jQuery UI Slider with 2 handles - prevent crossing带有 2 个手柄的 jQuery UI 滑块 - 防止交叉
【发布时间】：2018-10-26 18:48:12
【问题描述】：

我正在开发一个有 2 个句柄的 jQuery UI 滑块。我想让它使右手柄不能与左手柄交叉。它们都可以是相同的值（即它们的值都可以是 2），但右手柄的数字不应小于左手柄的数字。这可能吗？

$(document).ready(function() {
    $('#slider').slider({
        min: 0,
        max: 4,
        step: .1,
        values: [0, 4],
        slide: function(event, ui) {
            for (var i = 0; i < ui.values.length; ++i) {
                $('input.value[data-index=' + i + ']').val(ui.values[i]);
            }
        }
    });

    $('input.value').change(function() {
        var $this = $(this);
        $('#slider').slider('values', $this.attr('data-index'), $this.val());
    });
});

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

<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>

【问题讨论】：

为什么不使用range: true？
我在this answer上有一个相关的演示sn-p。

标签： jquery jquery-ui jquery-ui-slider

【解决方案1】：

您可以使用range: true 设置范围选项。您还可以使用 CSS 隐藏范围。示例：

$(document).ready(function() {
  $('#slider').slider({
    min: 0,
    max: 4,
    step: .1,
    values: [0, 4],
    range: true,
    slide: function(event, ui) {
      $.each(ui.values, function(i, v) {
        $('input.value').eq(i).val(v);
      });
    }
  });

  $('input.value').change(function() {
    var $this = $(this);
    $('#slider').slider('values', $this.attr('data-index'), $this.val());
  });
});

#slider {
  margin-bottom: 20px;
}

#slider div.ui-slider-range {
  background: transparent;
}

input[data-index="1"] {
  float: right;
}

<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>

【讨论】：