Der exponentielle Wachstum des Eingangsbereiches Wert

Question

Wenn Sie ein HTML-Eingabeelement verwenden, um einen Bereich zu definieren, wie diese:

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

Ist es möglich, die Werte exponentiell wachsen zu lassen? Wenn Sie zum Beispiel nur ein bisschen in die Nähe der linken Seite schieben, wird es einen Unterschied von 1 bis 2 geben (zB Meilen Entfernung), aber wenn Sie es auf der rechten Seite um denselben Betrag schieben, es macht den Unterschied zwischen 900 und 1000 Meilen.

Sie wissen, was ich meine? Weil es nicht fair ist, dass die Mitte 500 ist, und dann kann man sie nie auf 20 oder 40 einstellen, aber auf der anderen Seite, wenn man hoch geht, macht es immer weniger Unterschied, sie auf 820 abzustimmen oder 840.

Ich hoffe meine Frage ist klar. Vielen Dank im Voraus.

Answer 1

Sie sollten auf "Eingabe" -Ereignis dieses Bereichs hören, den Wert erhalten und Exponential mit Javascript berechnen. Sie können den Wertebereich auf 0..100 einstellen, um die Dinge ein wenig zu erleichtern.

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