HTML 范围输入，较大的值在范围输入中占用较少的空间

Question

这很难用语言来解释。我画了一张粗略的图来说明我的意思:

假设我们有一个 input=range 元素，其中 min=0、max=100、step=1.

默认情况下，步数是均匀分布的。因此范围值 50 将位于元素的中间。

我希望元素中间的范围值为 25。这意味着前 25 步占据 50% 的范围，其余 75 步占据剩余的 50% 范围。

有什么办法可以实现吗？

Answer 1

范围输入始终是线性的，并且没有内置其他曲线选项。您必须自己计算该曲线。

让我们首先将您的输入范围修改为从 0 到 1。

<input type="range" min="0" max="1" step="0.01" />

获得所需曲线的一种简单方法是使用正弦函数。通过将该值乘以 PI/2，我们最终得到了理想的曲线:

(你可以 fiddle with it on Wolfram Alpha .)

这很容易用 JavaScript 实现:

document.querySelector('input').addEventListener('input', (e) => {
  console.log(Math.sin(e.target.value * Math.PI/2));
});

我在 JSFiddle 上放了一个完整的例子，带有 SVG 可视化:https://jsfiddle.net/rexLoczj/1/