input type=range und input type=number verbinden

[Gunnar Bittersmann]

@@JürgenB

ich bin der Meinung, dass in vielen Fällen zu einem <input type=range> ein input type=number> gehört.

Ich nicht.

Bei einer Bewertung von ganz mies bis tip-top kann man <input type=range> einsetzen. Die Defaults min="0" max="100" step="1" sind feinstufig genug, um eine stufenlose Bewertungsmöglichkeit vorzugaukeln. Ob dann nun 67, 71 oder 73^[1] eingestellt wird, ist unerheblich. Hier ist ein Schieberegler eine gute Eingabemöglichkeit.

Anders sieht es aus, wenn Genauigkeit gefragt ist. Die wäre nur bei einer Eingabe per Schieberegler nur mit Fummelei hinzubekommen. Da sollte es kein Schieberegler, sondern ein Eingabefeld sein.

Aber beides? In vielen Fällen? Wohl nicht. Man sollte sich für eins entscheiden.

Es mag Spezialfälle geben, wo beides angebracht ist. Wie Wirbel und Feinstimmer bei einer Fiedel. Aber eher die Ausnahme als die Regel.

Die value werden dann durch ein Javascript gekoppelt.

Und man muss den Nutzern irgendwie verklickern, dass mit beiden Eingabe-Elementen derselbe Wert eingestellt wird.

<label>Rot<br>
  <input type="range" min="0" max="255" step="1" value="0"><br>
  <input type="number" min="0" max="255" step="1" value="0">
</label>

„Du Henry! Henry! HENRY! Da ist so ein Geräusch!“^[2]

Jetzt darf man natürlich ein Label nicht zwei Inputs zuordnen.

Hm …^[3]

<span id="red">Rot</span>
<input type="range" aria-labelledby="red"/>
<input type="number" aria-labelledby="red"/>

Aber gut ist das nicht, wenn man den Unterschied der Eingabe-Elemente nicht mitgeteilt bekommt.

<span id="rough" hidden="">Grobeinstellung</span>
<span id="fine" hidden="">Feineinstellung</span>

<span id="red">Rot</span>
<input type="range" aria-labelledby="red rough"/>
<input type="number" aria-labelledby="red fine"/>

(#rough und #fine werden natürlich bei Grün und Blau wiederverwendet.)

Aber wohl besser so mit label und gruppierten Eingabe-Elementen:

<fieldset>
  <legend>Rot</legend>
  <label for="red-rough">Grobeinstellung</label>
  <input type="range" id="red-rough"/>
  <label for="red-fine">Feineinstellung</label>
  <input type="number" id="red-fine"/>
</fieldset>

Kwakoni Yiquan

---

1. Die Zahlen bilden den größten Primzahldrilling ≤100. ↩︎

2. Jan und Henry ↩︎

3. Warum muss ich jedesmal aufs Neues nachschlagen, ob sich labelled mit zwei oder mit drei L schreibt? ↩︎