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

【问题标题】：HTML range type input enforced minimum without changing start of the rangeHTML范围类型输入强制最小值而不更改范围的开始
【发布时间】：2017-07-11 21:25:08
【问题描述】：

我想在范围输入上强制最小值为 50，但视觉范围仍然从 0 开始，因此当输入设置为 50 时，滑块位于中间，用户无法推动滑块更低。

换一种说法，我希望值为 50，我希望滑块在中间，并且我希望不允许用户减小滑块。

当我使用这个时，滑块在最左边，当滑块在中间时，它代表75。这不是我要寻找的行为。

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

如何在不将范围开始设置为最小值的情况下对范围输入强制设置最小值？

【问题讨论】：

“我想在范围输入上强制最小 50，但范围仍然从 0 开始。” 不可能。如果它可以从 0 开始，那么最小值是 0，而不是 50。
我希望视觉上的开始为 0，但要防止用户将滑块滑到我设置的最小值以下。

标签： javascript html validation input

【解决方案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;
}

&lt;input type="range" min="0" max="100" value="50" id="slider"&gt;&lt;span id="output"&gt;50&lt;/span&gt;

【讨论】：

【解决方案2】：

您将当前值设置为等于最小值 - 所以看起来您的范围开始等于 0，但实际上它确实是 50。

【讨论】：

根据 OPs 声明，他希望强制执行最小值 50，永远不允许值为 0。
我明白了。我希望值为 50，我希望滑块在中间，并且我希望不允许用户减小滑块。
@Goose 我认为你应该使用一些 3rd 方小部件而不是 input type="range"