防止范围字段选择小于当前值答案

【问题标题】：Prevent range field selection less than current value防止范围字段选择小于当前值
【发布时间】：2016-08-23 21:23:55
【问题描述】：

有没有办法防止范围输入选择/滑动小于当前值？例如，如果我有一个设置值为 500 的范围输入，例如 <input type="range" min="0" max="10000" step="1" value="500">，并且不希望用户向左/小于当前值 500（仅向右/大于 500）滑动范围句柄。

【问题讨论】：

标签： jquery html range

【解决方案1】：

您可以使用 min 属性，但如果您需要将最小值限制为实际值，您可以：

保存当前值
监听范围的变化，如果值小于 ....

sn-p：

$(function () {
  // save the value
  var minValue = +$('input[type="range"]').val();

  $('input[type="range"]').on('input', function(e) {
    
    // if the value is below minValue...
    if (+$(this).val() < minValue) {
      $(this).val(minValue);
    }
    
     $('#rVal').text('Range vaalue is: ' + $(this).val());
  }).trigger('input');
});

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<form>
    <p id="rVal"></p>
    <input type="range" min="0" max="10000" step="1" value="500" style="width: 100%;">
</form>

【讨论】：

【解决方案2】：

为什么不将min 属性设置为当前值？

【讨论】：

因为当您设置min 属性时，它不会直观显示。我希望显示当前范围（例如 500 承诺 10000）。