javascript - 有没有办法为范围滑块设置默认的最小步数？

Question

有没有办法让范围滑块的第一步被填充而不是在边缘？例如，这将是第 1 步，用户将无法再向左拉它。

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

标签： javascripthtmlcss

Answer 1

这是一个工作示例。希望能帮助到你。

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>