CODEWITHSUNDEEP
javascript
gokovivo
gokovivo

Reputation: 11

In Range Slider how to disable downgrading

For example if the user is at 22 in range slider then dont let user go down to 21 and so on. The user should only be able to scroll to the right side. I am using range slider to select plans and I dont want user to downgrade plan thats why I want this functionality. Is it possible?

https://jsfiddle.net/59xL36b8/

 <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    .slidecontainer {
      width: 100%;
    }

    .slider {
      -webkit-appearance: none;
      width: 100%;
      height: 15px;
      border-radius: 5px;
      background: #d3d3d3;
      outline: none;
      opacity: 0.7;
      -webkit-transition: .2s;
      transition: opacity .2s;
    }

    .slider:hover {
      opacity: 1;
    }

    .slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 25px;
      height: 25px;
      border-radius: 50%;
      background: #4CAF50;
      cursor: pointer;
    }

    .slider::-moz-range-thumb {
      width: 25px;
      height: 25px;
      border-radius: 50%;
      background: #4CAF50;
      cursor: pointer;
    }
    </style>
    </head>
    <body>

    <h1>Round Range Slider</h1>

    <div class="""slidecontainer">
      <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
      <p>Value: <span id="demo"></span></p>
    </div>

    <script>
    var slider = document.getElementById("myRange");
    var output = document.getElementById("demo");
    output.innerHTML = slider.value;

    slider.oninput = function() {
      output.innerHTML = this.value;
    }
    </script>

    </body>
    </html>

Upvotes: 1

Views: 48

Answers (2)

CodeF0x
CodeF0x

Reputation: 2682

This should work for you.

Just don't let the value get beneath the minimum value.

var minValue = 0;
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;

slider.oninput = function(e) {
  if (slider.value > minValue) {
    output.innerHTML = this.value;
    minValue = this.value;
  } else {
    this.value = minValue;
  }
}
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    .slidecontainer {
      width: 100%;
    }
    
    .slider {
      -webkit-appearance: none;
      width: 100%;
      height: 15px;
      border-radius: 5px;
      background: #d3d3d3;
      outline: none;
      opacity: 0.7;
      -webkit-transition: .2s;
      transition: opacity .2s;
    }
    
    .slider:hover {
      opacity: 1;
    }
    
    .slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 25px;
      height: 25px;
      border-radius: 50%;
      background: #4CAF50;
      cursor: pointer;
    }
    
    .slider::-moz-range-thumb {
      width: 25px;
      height: 25px;
      border-radius: 50%;
      background: #4CAF50;
      cursor: pointer;
    }
  </style>
</head>

<body>

  <h1>Round Range Slider</h1>

  <div class="slidecontainer">
    <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
    <p>Value: <span id="demo"></span></p>
  </div>


</body>

</html>

Upvotes: 1

varun agarwal
varun agarwal

Reputation: 1509

You could maintain a variable which holds the previous value and prevents the user to set the value to one lower than what the variable holds.

var prev_value = 50 //For example;


slider.oninput = function(ev) {
  if (parseInt(ev.target.value) < prev_value) {
    ev.preventDefault();
    this.value = prev_value;
  }
  output.innerHTML = this.value;
}

Here is a fiddle - https://jsfiddle.net/L5tgx8ys/1/

Upvotes: 0

Related Questions