javascript - 具有负值的 HTML 输入类型范围（滑块）

Question

我正在使用滑块<input type="range" />：

• 最小值：-20
• 最大值：-90
• 步骤：15
• 该值应为：-20、-35、-50、-65、-80
• 由于步长约束，永远不会达到 -90 的值。

它适用于正值（最小值：20，最大值：90，步长：15），但我不知道如何处理负值。
你能帮助我吗？

查看和修改我的沙箱（只是一个普通的 HTML 和 JS）

标签： javascripthtmlhtml-inputhtml-input-element

Answer 1

将最小值设置为-80并添加padding-left到滑块，让用户认为这-90是最小值。

const sliders = document.querySelectorAll("input[type=range]");

for (const slider of sliders) {
  slider.addEventListener('change', (e) => {
    e.target.nextElementSibling.value = e.target.value;
  });

  slider.nextElementSibling.value = slider.value;
}

input {
  padding-left: 15px;
}

<input type="range" min="-80" max="-20" step="15" />
<output></output>