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的帮助下，范围滑块的步调不均匀，并且在移动滑块时，文本输入字段的值也会更改。

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

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

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

Answer 1

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

由于您将值设置为closestVal，而该值应该是index的相应closestVal，因此，当closestValue为{ {1}}，最后是高于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));
  });
});

动态更改范围滑块的值

1 个答案: