动态更改范围滑块的值

Question

我有一些带有 input[type="text"] 和 input[type="range"] 的 div。

<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 的帮助下，范围滑块的步长不均匀，文本输入字段的值在移动滑块时会发生变化。

如果您在输入字段中输入数字，该数字会更改为最接近的 step/value。

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

问题是范围滑块只移动到末尾或中间而不是输入的step/value。有解决这个问题的想法吗？

Answer 1

您的问题是当您在输入文本中输入 value 时，将错误的 value 设置为 range。

因为您将值设置为 closestVal 而它应该是 closestVal 的相应 index，这就是为什么当 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>

动态更改范围滑块的值

Change value of range slider dynamically

html

javascript

jquery

input

html-input