使用 javascript 覆盖范围滑块值答案

【问题标题】：overwrite range slider values using javascript使用 javascript 覆盖范围滑块值
【发布时间】：2018-03-06 14:56:48
【问题描述】：

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

这是我正在使用的代码：

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

【问题讨论】：

标签： javascript jquery rangeslider

【解决方案1】：

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

【讨论】：