Range Slider Eingabe

Die slider Komponente bietet ein Eingabefeld zur Auswahl numerischer Werte innerhalb eines definierten Intervalls. Sie unterstützt sowohl die Auswahl mit einem einzigen Wert als auch die Auswahl mit zwei Schiebereglern.

WCAG AA

WCAG AAA

JavaScript

Funktionen

Zwei-Regler-Modus: Zum Auswählen eines Bereiches mit Minimal- und Maximalwerte.
Benutzerdefinierte Legende: Textbeschriftungen, die unterhalb des Schiebereglers angezeigt werden.
Legendenmodi: static, skip (blendet Elemente bei Platzmangel aus) oder rotate (vertikaler Text).
Schrittweite: Konfigurierbarer Schrittwert.
RTL-Unterstützung: Passt sich an Layouts von rechts nach links an.

HTML

RTL

Verwendung

Die Komponente wird über das range_slider Tag eingebunden.

{% load insight_tags %}  {% slider tag_id="cpu-cores" name="cpu_core_count" value=4 minimum=2 maximum=8 step_size=2 label="Choose amount of CPU-Cores:" items=labels %}  {% slider tag_id="month" name="month" value=6 minimum=1 maximum=12 items=months legend_mode="skip" %}  {% slider tag_id="month" name="month" value=6 minimum=1 maximum=12 items=months legend_mode="rotate" %}  {% slider tag_id="price-range" name="price" dual=True value_min=200 value_max=800 minimum=0 maximum=1000 label="Price Range:" items=price_labels %}  {% slider config=slider_config %}

Parameter

config (SliderConfig oder als kwargs oder als Kombination aus beidem)

Dataclass für die Komponentenkonfiguration.

Name	Typ	Beschreibung	Standardwert	Erforderlich
tag_id	str	Optionale, eindeutige Tag-ID für die Identifizierung des Elements im JavaScript.	None	False
name	str	Wird für eine <form> benötigt, als Name des Request-Parameters.	None	False
label	str	Ein beschreibender Text, welcher über dem Eingabefeld angezeigt wird.	None	False
disabled	bool	True, wenn das Feld deaktiviert sein soll.	False	False
disabled_reason	str	Erklärung, warum das Eingabefeld deaktiviert ist; wird beim drüberfahren mit der Maus als Tooltip angezeigt. Mit einem leeren String, kann bewusst kein Tooltip angezeigt und die Warnmeldung deaktiviert werden.	None	False
required	bool	True, wenn das Feld ausgefüllt werden muss.	False	False
value	int	Der Wert des Range-Sliders (nur im Ein-Regler-Modus).	None	False
minimum	int	Kleinster einzustellender Wert des Range-Sliders.	0	False
maximum	int	Größter einzustellender Wert des Range-Sliders.	100	False
step_size	int	Die Größe der Schritte, um welche sich der Wert beim Bewegen des Range-Sliders verändert.	1	False
items	list[str]	Eine Liste von Texten, welche als Legende unter dem Slider angezeigt werden.	[]	False
legend_mode	SliderLegendMode SliderLegendMode Legend display modes for the range slider component. `static` `skip` `rotate` Typen Dokumentation →	Steuert das Verhalten der Legende. Optionen: 'static' (Standard) – keine Anpassung; 'skip' – blendet Legendenelemente schrittweise aus, wenn der Platz begrenzt ist; 'rotate' – dreht den Legendentext vertikal, wenn der Platz begrenzt ist.	static	False
dual	bool	True, um den Zwei-Regler-Modus zur Auswahl eines Bereichs mit Minimal- und Maximalwerten zu aktivieren.	False	False
value_min	int	Der Mindestwert im Zwei-Regler-Modus. Standardwert ist minimum.	None	False
value_max	int	Der Maximalwert im Zwei-Regler-Modus. Standardwert ist maximum.	None	False

SliderConfig( name="price", label="Price Range", minimum=0, maximum=1000, dual=True, value_min=200, value_max=800, items=["0€", "250€", "500€", "750€", "1000€"], )

Barrierefreiheit

	WCAG AA	WCAG AAA
Status

WCAG AA (Grundlagen)

Das <label> und der dazugehörige <input> sind mit for / id miteinander verknüpft.
Die Komponente unterstützt die Navigation über die Tastatur mittels der Pfeiltasten (hoch/runter, rechts/links).
Die ARIA-Attribute aria-valuemin, aria-valuemax und aria-valuenow werden für jedes Eingabefeld festgelegt und für die Ansagen durch Screenreader dynamisch aktualisiert.
Bei zwei Reglern verfügen beide Regler über beschreibende aria-label-Attribute (z. B. „Label – Minimum“, „Label – Maximum“) und werden mithilfe von role="group" mit aria-labelledby gruppiert.
Für die Tastaturnavigation stehen sichtbare Fokusanzeigen zur Verfügung (ein Ring mit der Eigenschaft focus-visible).
Dekorative Elemente (Leiste, Legende) werden mithilfe von aria-hidden="true" für assistiven Technologien ausgeblendet.