javascript - 使用 JavaScript 覆盖范围 slider 值

Question

我使用带有文本框的范围 slider ，因此每当我滑动范围时，文本框中的值都会更新。此外，每当我更改文本框中的值时， slider 都会相应移动。

这是我正在使用的代码:

$('input[type="range"]').on('input change', function() {
  $('#LoanAmntText').val($(this).val());
});


$('#LoanAmntText').keyup(function(e) {
  var val = $(this).val().replace(/[^\d\+]/g, ""); // check only for digits
  $('#LoanAmntRange').val(val).trigger("change");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="range" min="0" max="20000000" step="100000" value="4000000" id="LoanAmntRange" class="LoanAmntRange">
<input type="text" id="LoanAmntText" />

slider 的最小值、最大值和步长值的使用方式可以在使用范围 slider 时覆盖最常见的值。但是当我使用文本框输入值时，我想使用从 0 开始的任何数字(例如:我需要输入 2450003)。但是使用当前代码，它不允许我这样做。

实现这一目标的最佳方法是什么？

fiddle :https://jsfiddle.net/anoopcr/cy14pu1L/11/

Answer 1

您的 keyup 事件将在每次按键后触发。由于您的 slider 的步长为 100000，因此没有一位数字能够符合这一要求。将步长更改为 1 或使用 change 事件。