输入范围值的指数增长

Question

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

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

有没有可能让这些值呈指数增长？例如，如果你在左边稍微滑动一下，就会产生1到2的差异(例如距离)，但如果你在右边滑动相同的量，就会产生900英里和1000英里的差异。

你懂我说的意思吗？因为中位数是500是不公平的，然后你永远不能将它微调到20或40，但另一方面，如果你走得更高，将它微调到820或840的差别越来越小。

我希望我的问题是清楚的。提前谢谢。

Answer 1

你应该监听这个范围的"input“事件，获取这个值，然后用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));
};