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

Posted 2023-05-08

【中文标题】带有 2 个手柄的 jQuery UI 滑块 - 防止交叉

【英文标题】：jQuery UI Slider with 2 handles - prevent crossing

【发布时间】：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。

【参考方案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>