<input type="mathematik">

[dedlfix]

Tach!

Gegeben sei ein Input-Element vom Typ range, also ein Slider. Der soll sich so verhalten, dass in der Mitte der Wert 1 liegt, Maximalwert soll 100 sein und Minimalwert 0.01. Aber so einfach ist es ja nicht. So ein Range-Input arbeitet linear, und ich brauch da wohl was logarithmisches oder vielleicht auch was anderes. Das ganze soll einen Multiplikator darstellen. Auf der rechten Seite oberhalb von 1 soll es im unteren Bereich recht fein verstellbar sein, und je weiter man zum Maximalwert kommt, desto weniger interessiert es, ob man da genaue Werte trifft. Analog dazu sollte es auf der linken Seite unterhalb von 1 zugehen. Wobei ich mir da noch nicht ganz sicher bin, da müsste ich mal sehen, wie es sich dann letztlich anfühlt, also welche Bewegung welche Änderung ergibt.

Aber wie gesagt, sowas kann der Range-Input nicht und man wird da was rechnen müssen, um von einem linearen Messwertgeber auf das gewünschte Verhalten zu kommen. Nur was? Meine Mathekenntnisse sind jedenfalls eingerostet.

Ich hab da auch mal ein kleines Fiddle vorbereitet. Falls es kaputtgeht, das ist der wesentliche Teil:

<input type="range" id="in" min="0" max="10000" step="1">
<output id="out"></output>

var inElement = document.querySelector('#in');
var outElement = document.querySelector('#out');
outElement.value = inElement.value;

inElement.addEventListener('input', function(event) {
 	outElement.value = f(inElement.value);
});

function f(x) {
  return x;
}

Die Funktion f() wäre also der gefragte Teil, wobei es mir hier auf die Idee ankommt, wie es zu lösen geht, und nicht auf den konkreten Code dazu. Die Werte von min, max und step sind keine Vorgaben und können am Ende so sein, wie es am besten für die Lösung passt.

dedlfix.