如何进行偏心范围输入？答案

【问题标题】：How to make off-centered range input?如何进行偏心范围输入？
【发布时间】：2022-01-06 07:16:12
【问题描述】：

我有一个范围输入，默认情况下，它的中心是 100 的 50 个点。我需要中心 20 个点，但保留最大值为 100。怎么做？ (image example)

【问题讨论】：

【解决方案1】：

这完全取决于您。实际输入范围将是线性的，但您的代码如何解释它返回的值是在您的控制范围内。

因此将输入的范围设置为最小 0 和最大 100。但是当您在 Javascript 中获取值时，您可以根据需要对其进行解释。

您可以拟合值 (x1, y1), (x2, y2), (x3, y3) 的最简单曲线是抛物线： y1 = ax1x1 + b*x1 + c;等等

为您的点 (0, 0), (50, 20), (100, 100) 求解这三个联立方程，我们得到：a=3/250; b=-0.2； c=0;

function getValue(v) {
  document.querySelector('#value').innerHTML = 3 / 250 * v * v - 0.2 * v;
}
getValue(document.querySelector('input').value);

<input type="range" min=0 max=100 onchange="getValue(this.value);">
<div>The calculated value is <span id="value"></span></div>

【讨论】：