这很难用语言来解释。我画了一张粗略的图来说明我的意思:
假设我们有一个 input=range
元素,其中 min=0
、max=100
、step=1
.
默认情况下,步数是均匀分布的。因此范围值 50 将位于元素的中间。
我希望元素中间的范围值为 25。这意味着前 25 步占据 50% 的范围,其余 75 步占据剩余的 50% 范围。
有什么办法可以实现吗?
最佳答案
范围输入始终是线性的,并且没有内置其他曲线选项。您必须自己计算该曲线。
让我们首先将您的输入范围修改为从 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/
关于HTML 范围输入,较大的值在范围输入中占用较少的空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55425581/