jQuery UI Slider с 2 ручками - предотвращает пересечение - PullRequest
Новая
       31

jQuery UI Slider с 2 ручками - предотвращает пересечение

0 голосов
/ 16 мая 2018

Я работаю над слайдером jQuery UI, который имеет 2 ручки.Я хотел бы сделать так, чтобы правая ручка не могла пересекать пути с левой.Оба могут иметь одинаковое значение (т. Е. Оба могут иметь значение 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>

1 Ответ

0 голосов
/ 17 мая 2018

Вы можете использовать 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>
...