Schieberegler oder Zahlenfeld? Entscheiden Sie, wie genau Kunden wählen müssen

Ein Schieberegler eignet sich für eine grobe Einstellung innerhalb eines bekannten Bereichs. Er ist nicht automatisch die richtige Wahl, wenn Kunden einen exakten Betrag, eine bestimmte Menge oder einen vertraglich wichtigen Wert eingeben müssen. Entscheidend ist nicht, welche Variante moderner aussieht, sondern welche Genauigkeit die Aufgabe verlangt.

Für eine Business-Web-App sollten Sie vor der Gestaltung drei Fragen beantworten: Welche Werte sind zulässig? Muss die Person einen bestimmten Wert gezielt erreichen können? Und was bedeutet es, wenn sie den Regler gar nicht bewegt?

Ungefähre Einstellung und genaue Eingabe trennen

Ein fiktives Kundenportal könnte die Größe einer Vorschau anpassbar machen. Die Person probiert aus, welche Darstellung angenehm ist; der genaue interne Wert ist nebensächlich. Dafür kann ein Regler sinnvoll sein.

Anders ist es bei einer Menge, die mit einem Lieferschein übereinstimmen muss. Dort ist eine direkte Eingabe meist die bessere Ausgangslösung. Falls Sie zusätzlich einen Regler anbieten, muss die genaue Zahl zuverlässig erreichbar und verständlich bleiben. Zwei Bedienelemente für denselben Wert dürfen sich nicht widersprechen.

Der WHATWG-HTML-Standard zum Eingabetyp range beschreibt ausdrücklich eine Zahleneingabe, bei der der exakte Wert nicht wichtig ist. Das erlaubt Browsern eine einfachere Oberfläche als beim Zahleneingabetyp. Daraus folgt keine Empfehlung, sämtliche numerischen Felder in Regler umzuwandeln.

Prüfen Sie außerdem, ob überhaupt eine durchgehende Skala vorliegt. Für wenige benannte Angebote wie „klein“, „mittel“ und „groß“ können ausdrücklich beschriftete Auswahlmöglichkeiten verständlicher sein. Ein Regler darf keine Zwischenangebote suggerieren, die Ihr Betrieb gar nicht verkauft.

Grenzen und Schrittweite fachlich festlegen

Legen Sie Untergrenze, Obergrenze und erlaubte Schritte fest. Benennen Sie die Einheit direkt beim Feld. „Intensität“ ohne Erklärung ist keine brauchbare Vorgabe, wenn niemand weiß, welche Wirkung eine Änderung hat.

Die HTML-Referenz definiert für range eigene Standardwerte für Bereich und Schrittweite. Sie beschreibt auch, dass nicht passende Werte auf zulässige Schritte gerundet und Werte außerhalb des Bereichs angepasst werden. Ein technisch gültiger Zustand beweist deshalb nicht, dass Ihre ursprüngliche Vorgabe korrekt übernommen wurde.

Lassen Sie die Entwicklung mit Ihren tatsächlichen Grenzen vorführen. Passen eine vorgeschlagene Anfangseinstellung und die Schrittweite zusammen? Was geschieht mit einem früher gespeicherten Wert, wenn Sie die erlaubten Schritte später ändern? Vereinbaren Sie eine nachvollziehbare Behandlung, statt stillschweigend eine andere Kundenentscheidung zu speichern.

Die Schrittweite bestimmt zulässige Werte. Sie ist nicht mit dekorativen Strichen auf der Skala gleichzusetzen. Prüfen Sie die tatsächlich auswählbaren Werte und verlassen Sie sich nicht darauf, dass jede sichtbare Markierung eine vollständig beschriftete Auswahl darstellt.

Ein unberührter Regler ist nicht leer

Ein besonders wichtiger Unterschied zu einem freien Eingabefeld: Nach der HTML-Spezifikation lässt sich der Wert eines range-Feldes nicht auf eine leere Zeichenfolge setzen. Für einen ungültigen Ausgangswert ist ein Standardwert vorgesehen, der grundsätzlich aus der Mitte des Bereichs entsteht, mit den weiteren Bereichs- und Schrittregeln.

Damit kann bereits vor jeder Berührung ein plausibler Wert vorliegen. Behandeln Sie ihn nicht automatisch als bewusst abgegebene Antwort. Wenn eine ausdrückliche Entscheidung nötig ist, muss der Ablauf diese gesondert erfassen. Ein Pflichtfeld-Attribut löst das nicht: required gehört laut dieser Referenz nicht zu den für range anwendbaren Attributen.

Für eine reine Vorschau kann eine vorgegebene Einstellung völlig angemessen sein. Benennen Sie sie dann als Ausgangseinstellung. Bei einer verbindlichen Anfrage sollte die Zusammenfassung dagegen zeigen, was tatsächlich bestätigt wird. Ein unberührtes Steuerelement und eine absichtlich gewählte mittlere Ausprägung sind fachlich nicht zwingend dasselbe.

Vorschau ist noch keine verbindliche Änderung

Bestimmen Sie, wann der neue Wert wirkt. Soll eine Bewegung nur die Vorschau verändern, eine persönliche Einstellung speichern oder eine Bestellung anpassen? Diese Folgen brauchen unterschiedliche Bestätigungen und gegebenenfalls eine Möglichkeit zur Korrektur.

Meine Empfehlung für folgenreiche Änderungen: Während des Ausprobierens bleibt erkennbar, dass es sich um einen Entwurf handelt. Erst die vereinbarte Bestätigung übernimmt den Wert. Eine Bewegung über den Regler sollte nicht unerwartet kostenpflichtige Vorgänge auslösen.

Auch die Prüfung auf dem Server gehört in die Anforderungen, sobald der Wert geschäftliche Folgen hat. Der Browserregler ist eine Eingabehilfe, kein Beleg dafür, dass eine veränderte Anfrage nur erlaubte Werte enthält. Legen Sie die Ablehnung und die hilfreiche Rückmeldung bei ungültigen Werten fest.

Die Bedienung mit echten Aufgaben abnehmen

Lassen Sie die Person nicht nur „irgendetwas verschieben“. Verwenden Sie konkrete Aufgaben in den Abnahmekriterien:

• Die Anfangseinstellung lesen und verstehen, ohne das Feld zu bewegen.
• Einen vorgegebenen zulässigen Zielwert erreichen und anschließend wieder korrigieren.
• Den kleinsten und größten Wert sowie den jeweils benachbarten zulässigen Schritt wählen.
• Die Aufgabe mit Tastatur, Touchbedienung und den vereinbarten assistiven Technologien erledigen.
• Eine Vorschau ändern, den Vorgang abbrechen und den unveränderten gespeicherten Zustand nachvollziehen.
• Einen älteren gespeicherten Wert nach einer Änderung der Bereichsregeln öffnen.

Beschriftung, Einheit und aktueller Wert müssen verständlich zugänglich sein. Prüfen Sie insbesondere auf einem schmalen Telefon, ob die Person ihren Zielwert tatsächlich trifft. Wenn eine präzise Wahl mühsam bleibt, ändern Sie die Eingabeform statt lediglich den Regler breiter zu zeichnen.

Bringen Sie zum Gespräch über Ihre Web-App ein reales Feld und dessen fachliche Konsequenz mit. Ein guter Regler macht eine passende ungefähre Wahl einfach. Er darf eine notwendige genaue Entscheidung nicht durch einen hübschen, schon ausgefüllten Standardwert ersetzen.

Quelle und Einordnung

Die am 26. Oktober 2026 gelesene WHATWG-Referenz belegt die Bedeutung von range, nicht leere Werte, Standardwertbildung, Bereichs- und Schrittregeln sowie die nicht anwendbare required-Eigenschaft. Empfehlungen zur Auswahl der Eingabeform, Bestätigung, Serverprüfung und Abnahme sind Projektanforderungen, keine Prüfung einer bestehenden App und keine Konformitätsbescheinigung.