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

Posted 2023-03-05

【中文标题】具有负值的 HTML 输入类型范围（滑块）

【英文标题】：HTML input type range (slider) with negative value

【发布时间】：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)

您是否删除了您的代码沙箱？请将代码添加到帖子中

没有。我已经更新了链接以确保它没有损坏

【参考方案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 的填充技巧，不是完美的解决方案，但它适用于我。缺点是需要计算填充了多少。