Динамическое изменение значения ползунка диапазона - PullRequest
Новая
       39

Динамическое изменение значения ползунка диапазона

0 голосов
/ 24 октября 2018

У меня есть несколько div с input[type="text"] и входом [type = "range"] внутри. 

<div class="box">
    <input type="text" value="10">
    <input type="range" min="0" value="0" max="18" step="1">
</div>
<div class="box">
    <input type="text" value="10">
    <input type="range" min="0" value="0" max="18" step="1">
</div>

С помощью некоторого jQuery ползунки диапазона имеют неровные шаги и значениеполя ввода текста изменяются при перемещении ползунка.

Если вы введете число в поле ввода, число изменится на ближайший шаг / значение. 

stepVal = [10, 35, 50, 90, 100, 135, 155, 170, 190, 220, 230, 250, 270, 290, 310, 320, 350, 365, 400];
$('.box').each(function() {
  $(this).on('input', 'input[type="range"]', function() {
    $(this).prev('input[type=text]').val(stepVal[this.value]);
  });
  $(this).on('blur', 'input[type="text"]', function() {
    var textVal = $(this).val();
    var closestVal = stepVal.reduce(function(prev, curr) {
      return (Math.abs(curr - textVal) < Math.abs(prev - textVal) ? curr : prev);
    });
    $(this).val(closestVal);
    $(this).next('input[type=range]').val(closestVal);
  });
});

Проблема заключается в том, что ползунок диапазона перемещается только до конца или досредний, но не до введенного шага / значения.Есть идеи, как решить эту проблему?

1 Ответ

0 голосов
/ 24 октября 2018

Ваша проблема в том, что вы устанавливаете неправильный value на range, когда вы вводите value во входном тексте.

Поскольку вы устанавливаете значение на closestValв то время как он должен быть соответствующим index из closestVal, поэтому он попадает только в середину, когда closestValue равен 10, и до конца для других значений, которые выше max.

Решение:

Вам необходимо изменить это: 

$(this).next('input[type=range]').val(closestVal);

Чтобы получить индекс этого значения из массива stepVal при вводе значенияв input. 

$(this).next('input[type=range]').val(stepVal.indexOf(closestVal));

Демо: 

stepVal = [10, 35, 50, 90, 100, 135, 155, 170, 190, 220, 230, 250, 270, 290, 310, 320, 350, 365, 400];
$('.box').each(function() {
  $(this).on('input', 'input[type="range"]', function() {
    $(this).prev('input[type=text]').val(stepVal[this.value]);
  });
  $(this).on('blur', 'input[type="text"]', function() {
    var textVal = $(this).val();
    var closestVal = stepVal.reduce(function(prev, curr) {
      return (Math.abs(curr - textVal) < Math.abs(prev - textVal) ? curr : prev);
    });
    $(this).val(closestVal);
    $(this).next('input[type=range]').val(stepVal.indexOf(closestVal));
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
    <input type="text" value="10">
    <input type="range" min="0" value="0" max="18" step="1">
</div>
<div class="box">
    <input type="text" value="10">
    <input type="range" min="0" value="0" max="18" step="1">
</div>
...