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/