javascript - 动态更改范围 slider 的值

Question

我有一些 div，里面有一个 input[type="text"] 和一个 input[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 的帮助下，范围 slider 具有不均匀的步长，并且文本输入字段的值在移动 slider 时发生变化。

如果您在输入字段中输入一个数字，该数字会更改为最接近的步长/值。

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

问题是范围 slider 仅移动到末尾或中间而不是输入的步长/值。有什么想法可以解决这个问题吗？

Answer 1

你的问题是你设置错了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>