Is there a way to set a default minimum num of steps for a range slider?

user_10091002 0
Viewed 76

Is there a way to make the range slider's first step be filled in instead of being on the edge? For example this would be step 1 and the user would NOT be able to pull it anymore left.

enter image description here

<input type="range" min="1" max="5" step="1" oninput="console.log(this.value);">
css html javascript
1 Answers

Here's a working example. Hope it helps.

var slider = document.getElementById("slider");
var output = document.getElementById("output");

// To accommodate all browsers (IE), two events need to be set up.
slider.addEventListener("input", fixSlider);
slider.addEventListener("change", fixSlider);

function fixSlider(evt){
  // If the value goes below 3, reset it to 3
  if(parseInt(this.value,10) < 3){
    this.value = 3;
  }
  output.textContent = this.value;
}
<input type="range" min="1" max="5" id="slider"><span id="output">3</span>

user_40841600
Related