输入范围值的指数增长

Question

使用HTML输入元素定义范围时，如下所示：

<input type="range" min="1" max="1000" value="100" name="distance"/>

是否有可能使值呈指数增长？比如说，如果你在左手边滑动一点点，它会产生1到2（例如距离的英里）的差异，但是如果你在右边滑动相同的数量，它会产生900到1000英里的差异。

你知道我的意思吗？因为中间是500是不公平的，然后你永远不能将它微调到像20或40这样的东西，但另一方面如果你向上高，它会使得微调到820的差异越来越小。或840。

我希望我的问题很明确。 提前谢谢。

Answer 1

您应该听取此范围的“输入”事件，获取值并使用javascript计算指数。您可以将值范围设置为0..100以简化操作。

Answer 2

HMTL

<input id="distanceRange" type="range" name="distance" min="0" max="100" value="0">

<output id="distanceOutput">1</output>

的javascript

document.getElementById("distanceRange").oninput = function(){
  document.getElementById("distanceOutput").value = Math.round(Math.exp((Math.log(1000)/100) * document.getElementById("distanceRange").value));
};