使用javascript覆盖范围滑块值

Question

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

这是我正在使用的代码：

$('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" />

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

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

小提琴：https://jsfiddle.net/anoopcr/cy14pu1L/11/

Answer 1

每次按键后，您的keyup事件都会触发。由于滑块的步长为100000，因此没有任何一个数字符合要求。将步长更改为1或使用change事件。