Question

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

Answer 1

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

Answer 2

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

保存当前值
听取范围的变化以及值是否小于....

摘录：

$(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 个答案: