在 JQuery UI 范围滑块中处理相互阻塞

Question

我正在使用 jQuery UI 滑块，发现两个与我非常相似的示例。 但是，第一个滑块允许将一个手柄拖动到另一个手柄的另一侧，而在第二个滑块中，手柄似乎相互阻挡（即您不能将左手柄拖动到右手柄的右侧反之亦然）。

谁能给我解释一下，为什么会这样？

这里是小提琴：http://jsfiddle.net/w4gy8p1v/1/

滑块代码：

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

    $("input.sliderValue").change(function() {
        var $this = $(this);
        $("#slider").slider("values", $this.data("index"), $this.val());
    });
});

<form>
    <div>
        <input type="text" class="sliderValue" data-index="0" value="10" />
        <input type="text" class="sliderValue" data-index="1" value="90" />
    </div>
    <br />
    <div id="slider"></div>
</form>

第二个滑块的代码：

  $(function() {
    $( "#slider-range" ).slider({
      range: true,
      min: 0,
      max: 500,
      values: [ 75, 300 ],
      slide: function( event, ui ) {
        $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
      }
    });
    $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
      " - $" + $( "#slider-range" ).slider( "values", 1 ) );
  });

<p>
  <label for="amount">Price range:</label>
  <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>

<div id="slider-range"></div>

Answer 1

区别来自range 选项（range: true）。

当范围选项为真时，滑块手柄不能交叉。