How to clamp an Input[type="range"]-CodePudding

I want the slider to not pass a certain limit. How can I set this is HTML and also change it in javascript?

<input type="range" min="0" max="100" value="30">

I want to set it so that the slider can never go past a certain value though the value will be there on slider i.e slider should have min:0 max:100 but never go past say 70.

CodePudding user response：

this could work for your case, but set the max value to 70 is better in my opinion.

function test(e, el) {
  if (e.target.value > 70) el.value = 70;
  document.querySelector("h1").innerHTML = "range value: "   e.target.value;
}

<input type="range" min="0" max="100" style="width: 100%;" oninput="test(event, this)">
<br>
<h1>range value: 50</h1>

CodePudding user response：

Here's a solution for you. If the user drags the slider over to 70, we reset it to 70 again.

<h1>Display a Range Field</h1>


  <label for="vol">Volume <span id="currentvalue">   </span>  (between 0 and 100):</label>
  <input type="range" id="vol" name="vol" min="0" max="100" value="30">

<script type="text/javascript">
document.getElementById("currentvalue").innerHTML = document.getElementById("vol").value;
document.getElementById("vol").addEventListener("change", function(e){
 
 if(e.target.value > 70) {
    alert("You can't pick above 70 for now!");  
    this.value = 70;
 }
 document.getElementById("currentvalue").innerHTML = e.target.value;
 e.preventDefault();
 e.stopPropagation();
})
  
</script>