user1260074 user1260074 - 1 year ago 68
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 Source

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) {
     $('#rVal').text('Range vaalue is: ' + $(this).val());
<script src=""></script>

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download