Question

我正在研究一个有2个句柄的jQuery UI滑块。我想这样做，使右手柄不能与左手柄交叉路径。它们都可以是相同的值（即它们都可以具有值2），但是右手柄的数量永远不应低于左手柄。这可能吗？

＆＃13;

$(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());
    });
});

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

1 个答案: