Viele von uns haben ihn schon gesehen und verwendet. Im WordPress-Block-Editor ist er für Dinge wie die Schriftgröße verschiedener Blöcke verfügbar. So sieht es z.B. sie für den core/paragraph Block aus:

Wenn ihr den Input verwendet, wird der aktuelle Wert unter dem „Anfasser“ angezeigt und auch im Zahlenfeld links davon aktualisiert.

Optionen für den Input

Die beiden wichtigsten Attribute für diesen Eingabetyp sind wahrscheinlich die Attribute min und max. Hier also ein einfaches Beispiel:

<input type="range" id="font-size" name="font-size" min="16" max="96" />
<label for="font-size">font size</label>

Vergesst wie immer nicht, ein <label> für eure Eingabefelder zu verwenden. Wenn ihr min nicht festlegen, ist der Standardwert 0 und für max ist er 100.

Ein weiteres Attribut, das ihr vielleicht verwenden möchten, ist step. Das kann ein Dezimal- oder Gleitkommawert sein, wie in diesem Beispiel:

<input type="range" id="font-size" name="font-size" min="16" max="96" step="4" />
<label for="font-size">font size</label>
<input type="range" id=">line-height" name="line-height" min="0" max="10" step="0.1" />
<label for="line-height">line height</label>

Aus irgendeinem Grund verwendet WordPress keinen Range-Input, sondern nur ein Zahlenfeld. Aber auch hier wird eine Schrittweite von „0,1“ verwendet.

Auf der Dokumentationsseite finden ihr auch ein ziemlich verrücktes Beispiel für das step Attribut und das sieht so aus:

<input id="pi_input" type="range" min="0" max="3.14" step="any" />

Wenn ihr den Wert „any“ verwendet, nimmt das Input wirklich „jeden beliebigen Fließkommawert“ zwischen min und max an. Interessanterweise erhaltet ihr 100 diskrete Werte, wenn ihr mit der Tastatur zum Feld navigiert und dann mit den Cursortasten links/rechts den Anfasser bewegt. Wenn ihr aber die Maus verwendet, dann erhalten ihr wirklich zufällige und wilde Zahlen dazwischen.

Verwendung des list Attributs

Im letzten Blogbeitrag zum Thema HTML haben wir bereits das list Attribut kennengelernt und auch das Range-Input unterstützt es. Einige normale und kreative Beispiele finden ihr in der Dokumentation. In Chrome lässt die Verwendung eines list Attributs den Anfasser an den <option> Werten der <datalist> „einrasten“. Ihr könnt aber auch einen Wert dazwischen einstellen. Meiner Meinung nach kann man das list Attribute am besten mit step kombinieren. In diesem Fall sind dann nur die Auswahl von Optionen in der <datalist> erlaubt:

<label for="temp">Choose a comfortable temperature:</label><br />
<input type="range" id="temp" name="temp" list="markers" step="25" />

<datalist id="markers">
  <option value="0"></option>
  <option value="25"></option>
  <option value="50"></option>
  <option value="75"></option>
  <option value="100"></option>
</datalist>

Dieser Codeschnipsel zeigt einen Range-Input ohne min/max Werte, aber mit einem zusätzlichen step="25" Attribut. Schauen euch dazu auch das Beispiel mit den Labels an.

Styling des Inputs

Das Styling würde je nach Browser oder Betriebssystem sehr unterschiedlich aussehen. Auch wenn WordPress einen solchen Input verwendet, ist das, was ihr seht, nicht das Input selbst. Es wird „transparent“ stattdessen gemacht und liegt über einem benutzerdefinierten HTML-Element, das mehrere <span> Elemente verwendet, um ein UI-Element zu schaffen, das in allen Browsern gleich aussieht. Wenn ihr genau dieses Element haben möchten, könnt ihr die RangeControl Komponente in eurem JavaScript-Code verwenden.

Aber auch wenn ihr das Range-Input nicht exakt gleich gestalten könnt, gibt es doch einige Optionen, wie etwa für das Ändern der Farbe des Balkens und des Anfassers:

input[type='range'] {
  height: 30px;
}
input[type='range'],
input[type='range']::-webkit-slider-runnable-track,
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
}
input[type='range']::-webkit-slider-runnable-track {
  height: 10px;
  background: red;
}
input[type='range']::-webkit-slider-thumb {
  position: relative;
  height: 30px;
  width: 30px;
  margin-top: -10px;
  background: green;
  border-radius: 50%;
}

Dies ist nur ein Beispiel für Chrome/Webkit. Es ist wichtig, viele Dinge auf appearance: none zu setzen, da sonst die anderen Styling-Änderungen keine Wirkung haben würden. Diese Stile würden zu dieser Darstellung führen:

Ihr wisst alle, dass ich kein Designer bin, aber ich hoffe, dass dies das Styling ein wenig illustriert. Wenn ihr wirklich kreativ werden wollt, schauen euch sich die Blogbeiträge von CSS-Tricks, Smashing Magazine oder W3Schools an.

Fazit

Range-Inputs können die UX einer Online-Anwendung wirklich verbessern, da Zahleneingaben in manchen Fällen nicht so „responsive“ sind. Und wenn ihr nicht in die WordPress-JavaScript-Bibliotheken einsetzt, ist die Verwendung des nativen Range-Inputs vielleicht alles, was ihr braucht.