user1260074 user1260074 - 3 months ago 12
jQuery Question

Prevent range field selection less than current value

Is there any way to prevent range input selection/slide less than the current value? For example, if I have range input with a set value of 500 like this

<input type="range" min="0" max="10000" step="1" value="500">
and don't want the user to be slide the range handle left/less than the current value of 500 (only right/more than 500).

Answer

You may use the min attribute, but if you need to limit the min value to the actual value you may:

  • save the current value
  • listen for changes on the range and if the value is less than ....

The snippet:

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