HTML Range Input Generator
Schieberegler-Eingabe für numerische Werte zwischen min und max.
Anwendung & Beispiele
Der Range-Slider zeigt selbst keinen aktuellen Wert an – kombiniere ihn z.B. mit einem <output>-Element oder JavaScript.
FAQ
Wie zeige ich den aktuellen Wert an?
Standardmäßig wird er nicht angezeigt. Kombiniere mit einem <output>-Element oder per JavaScript: slider.addEventListener("input", () => output.textContent = slider.value).
Kann ich einen Slider mit zwei Anfassern erzeugen?
Nicht nativ — <input type="range"> hat nur einen Wert. Für Doppel-Slider (z.B. Preis-Bereich) nutze JavaScript-Bibliotheken wie noUiSlider.
Wie style ich den Slider individuell?
Per CSS-Pseudo-Elemente: ::-webkit-slider-thumb, ::-moz-range-thumb, ::-webkit-slider-runnable-track — leider browserspezifisch und etwas mühsam.
Wofür sind ID, Class und Title?
id identifiziert ein Element eindeutig (für CSS, JS, Anker-Links). class erlaubt CSS-Styling, mehrere Klassen werden mit Leerzeichen getrennt. title erzeugt einen Tooltip beim Hover.
Funktioniert der Code in allen Browsern?
Alle hier erzeugten Elemente sind valides HTML5 und werden in allen modernen Browsern (Chrome, Firefox, Safari, Edge, Opera) unterstützt. Bei sehr alten Browsern (z.B. IE 11) kann es bei einzelnen Input-Typen wie color oder date Einschränkungen geben.