輸入範圍的指數增長值

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