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

【问题标题】：HTML input type range (slider) with negative value具有负值的 HTML 输入类型范围（滑块）
【发布时间】：2021-12-08 08:38:51
【问题描述】：

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

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

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

See & modify my sandbox (just a vanilla HTML & JS)

【问题讨论】：

反转你的最小值和最大值<input type="range" min="-90" max="-20" step="15"/> -90 小于 -20
但是影响步长的 min_value，所以 value = min + (step * N)
您是否删除了您的代码沙箱？请将代码添加到帖子中
没有。我已经更新了链接以确保它没有损坏

标签： javascript html html-input html-input-element

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

【讨论】：

嗯，不错的把戏。然后翻转horz就完成了

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

【讨论】：

但它也需要修改服务器端验证
但最接近的解决方案是@Tom 的填充技巧，不是完美的解决方案，但它适用于我。缺点是需要计算填充了多少。