Universell einsetzbar

Slider funktioniert sowohl auf dem Server als auch im Browser. Nutze immer den Standard-Import (z. B. @prokodo/ui/slider) — die Library erkennt die Umgebung automatisch.

Slider

Slider rendert ein mit prokodo Design-Tokens gestyltes <input type="range">. Unterstützt Single-Thumb- und Dual-Thumb-Bereichsmodi.

---

Übersicht

import { Slider } from "@prokodo/ui/slider"
;<Slider
  name="volume"
  label="Volume"
  min={0}
  max={100}
  step={1}
  value={volume}
  onChange={setVolume}
/>

Live PreviewOpen in Storybook ↗

---

Import

import { Slider } from "@prokodo/ui/slider"

CSS:

import "@prokodo/ui/slider.css"

---

Props

Prop	Typ	Standard	Pflicht	Beschreibung
id	string	—	✅	HTML-id für den Slider (für Barrierefreiheit erforderlich).
label	string	—	—	Slider-Beschriftungstext.
value	number | string	—	—	Gesteuerter Slider-Wert.
defaultValue	number | string	—	—	Unkontrollierter Ausgangswert.
min	number	0	—	Mindestwert.
max	number	100	—	Maximalwert.
step	number	1	—	Schrittweite.
snap	boolean	false	—	Wert auf Schrittweise einrasten.
marks	boolean | SliderMark[]	false	—	Tick-Markierungen oder benutzerdefinierte Markierungen.
disabled	boolean	false	—	Slider deaktivieren.
required	boolean	false	—	Feld als Pflichtfeld markieren.
hideLabel	boolean	false	—	Beschriftung visuell ausblenden.
labelProps	LabelProps	—	—	Props für das Label-Element.
valueLabelProps	object	—	—	Props für das Wert-Label-Tooltip.
color	Variants	—	—	Farbakzent-Variante.
errorText	string	—	—	Fehlermeldung.
helperText	string	—	—	Hilfetext unterhalb.
onChange	(value: number) => void	—	—	Wird bei Wertänderung aufgerufen.
className	string	—	—	CSS-Klasse am Root-Element.

Siehe src/components/slider/Slider.model.ts für den vollständigen SliderProps-Typ.

---

Design-Tokens

Passe Slider über CSS Custom Properties auf :root oder einem übergeordneten Element an.

Token	Standard	Beschreibung
--pk-slider-track-height	4px	Track-Höhe
--pk-slider-track-bg	var(--pk-color-border)	Ungefüllte Track-Farbe
--pk-slider-fill-from	var(--pk-color-brand)	Verlauf Start (Füllung)
--pk-slider-fill-to	var(--pk-color-accent)	Verlauf Ende (Füllung)
--pk-slider-thumb-size	24px	Thumb-Durchmesser
--pk-slider-tooltip-bg	var(--pk-color-fg)	Tooltip-Hintergrund
--pk-slider-tooltip-fg	var(--pk-color-surface)	Tooltip-Textfarbe
--pk-slider-timing	150ms	Animationsdauer

AIC-Hinweis

Verwende im Anwendungscode immer den Standard-Importpfad:

import { Slider } from "@prokodo/ui/slider"

Eine separate Auswahl von /client oder /lazy ist im Consumer-Code nicht erforderlich.

AIC-Komponenten unterstützen außerdem ein priority-Flag für kritische Above-the-fold-Elemente. Am sichtbarsten ist das bei Image (natives Preloading via <link rel="preload"> für Above-the-fold-Inhalte).

---

WCAG-2.2-Status

Kriterium	Bezeichnung	Status	Hinweis
1.3.1	Info und Beziehungen (A)	✅ Erfüllt	Semantische Struktur (Überschriften, Listen, Labels, Landmarks) muss programmatisch via HTML oder ARIA vermittelt werden.
1.4.1	Verwendung von Farbe (A)	🔍 Manuell prüfen	Farbe darf nicht das einzige Mittel zur Informationsvermittlung sein (z. B. Fehlerhinweise, Pflichtfeldmarkierungen).
2.1.1	Tastatur (A)	🔍 Manuell prüfen	Alle Funktionalität muss allein über Tastatur bedienbar sein, ohne Timing-Anforderungen.
2.4.7	Fokus sichtbar (AA)	🔍 Manuell prüfen	Auf jedem interaktiven Element muss ein sichtbarer Tastaturfokus-Indikator vorhanden sein. Prüfung gegen das angewendete Produkt-Theme erforderlich.
2.5.3	Label im Namen (A)	✅ Erfüllt	Bei Komponenten mit sichtbarem Label muss der zugängliche Name den sichtbaren Labeltext enthalten oder diesem entsprechen.
3.3.2	Bezeichnungen oder Anweisungen (A)	✅ Erfüllt	Jedes Formularfeld benötigt ein programmatisch verknüpftes Label oder eine sichtbare Anweisung.
4.1.2	Name, Rolle, Wert (A)	✅ Erfüllt	Name, Rolle und Zustand aller interaktiven UI-Komponenten müssen via nativer HTML-Semantik oder ARIA programmatisch bestimmbar sein.

Testabdeckung: 2 jest-axe-Assertion(s) in 5 Testdatei(en) · 7 ARIA-Attribut-Vorkommen im Quellcode-Scan. Kriterien mit 🔍 erfordern manuelle Prüfung im finalen Integrations- und Theme-Kontext.

Storybook

👉 Slider in Storybook öffnen

---

Quellcode

src/components/slider/Slider.model.ts