我怎样才能有负值的范围滑块？

Question

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

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

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

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>

Answer 2

你不能简单地使用HTML来做到这一点，因为-90低于-20所以你不能设置min="-20" max="-80"。但是通过使用这个技巧你可以实现你的输出。

将 HTML 保持为：

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

将您的 JavaScript 更改为：

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

  slider.nextElementSibling.value = "-" + slider.value;
}

我怎样才能有负值的范围滑块？

How can I have a range slider with negative values?

html

javascript

html-input