输入范围的指数增长值

Question

当您使用HTML input元素的定义范围，像这样的：

<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)); 
};