Range-Slider-Generator
input type=range gestalten: Spur, Füllung und Regler für Chrome, Safari und Firefox einstellen und HTML, CSS und JS kopieren.
Der Range-Slider-Generator gestaltet input type="range" einheitlich für Chrome, Edge, Safari und Firefox. Du stellst Spur, Füllfarbe für den Fortschritt und den Regler mit Größe, Radius, Rahmen und Schatten ein. Für die Füllung in Chromium und Safari liefert der Generator eine kurze JavaScript-Zeile mit, Firefox braucht keine.
<label for="lautstaerke">Lautstärke</label>
<input class="range" id="lautstaerke" type="range" min="0" max="100" value="50">input type="range" gestalten
Ein Range-Slider besteht aus Spur und Regler. Beide sind browserspezifische Pseudo-Elemente.
Zuerst setzt appearance: none das Standardaussehen zurück, danach gestaltest du beide
Teile getrennt für WebKit/Blink und Firefox.
| Teil | Chrome, Edge, Safari | Firefox |
|---|---|---|
| Spur | ::-webkit-slider-runnable-track | ::-moz-range-track |
| Regler | ::-webkit-slider-thumb | ::-moz-range-thumb |
| Füllung | Verlauf mit --value | ::-moz-range-progress |
Weitere Formularelemente gestaltest du im Select-Dropdown-Generator und im Input-Feld-Generator.
Häufige Fragen
Warum gibt es doppelte Regeln für -webkit- und -moz-?
Spur und Regler eines Range-Sliders sind Pseudo-Elemente, für die es keinen gemeinsamen Standard gibt. Chrome, Edge und Safari nutzen ::-webkit-slider-runnable-track und ::-webkit-slider-thumb, Firefox ::-moz-range-track und ::-moz-range-thumb. Die Regeln dürfen nicht in einer Selektorliste stehen, sonst verwirft ein Browser beide.
Wie färbe ich den Bereich links vom Regler ein?
Firefox kennt dafür ::-moz-range-progress. In Chromium und Safari setzt ein kleines Skript die Variable --value auf den Prozentwert, die Spur nutzt sie in einem linear-gradient. Ohne Skript bleibt die Spur einfarbig, der Slider funktioniert trotzdem.
Warum hat der Regler ein margin-top?
In WebKit-Browsern sitzt der Regler oben an der Spur. Mit margin-top: (Spurhöhe − Reglergröße) / 2 wird er vertikal zentriert. Firefox zentriert automatisch.
Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.