Question

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

以另一种方式解决问题，我希望值为50，我希望滑块位于中间，我希望不允许用户减少滑块。

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

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

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

Answer 1

您必须将范围控制设置为允许最小值为零，但是当用户尝试将其置于其下方时，通过JavaScript将其重置为50。

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

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

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

2 个答案: