javascript - HTML 范围类型输入强制最小值而不更改范围的开始

Question

我想在范围输入上强制执行最小值 50，但范围视觉上仍然从 0 开始，这样当输入设置为 50 时， slider 位于中间，用户无法插入 slider 更低。

换句话说，我希望该值为 50，我希望 slider 位于中间，并且我希望不允许用户减小 slider 。

当我使用它时， slider 位于最左侧，当 slider 位于中间时，它代表 75。这不是我正在寻找的行为。

<input type="range" min="50" max="100" value="50"/>

如何在不将范围的起点设置为最小值的情况下对范围输入强制执行最小值？

Answer 1

您必须将范围控件设置为允许最小值为零，然后当用户尝试低于该值时，通过 JavaScript 将其重置为 50。

请注意，范围元素并不普遍支持 input 事件，因此您还需要在 change 事件处理程序中设置相同的函数。

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

// Set up an event handler for when the slider is changed
// To accomodate 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 50, reset it to 50
  if(parseInt(this.value,10) < 50){
    this.value = 50;
  }
  output.textContent = this.value;
}

<input type="range" min="0" max="100" value="50" id="slider"><span id="output">50</span>