Slider
Slider
Uno Slider.Root di Radix — un cursore, o diversi per un intervallo (uno per ogni elemento in value/defaultValue).
import { Slider } from "@pompeitech/vesuvius-ui";Valore singolo
Intervallo
Disabilitato
Step
Uno step più grande fa scattare il cursore su meno posizioni — utile quando solo alcuni valori hanno un significato:
Verticale
API
Slider
| Prop | Tipo | Default | Descrizione |
|---|---|---|---|
value / defaultValue | number[] | [0] | Un elemento per cursore — un array a due elementi renderizza uno slider a intervallo (vedi sopra). |
min / max | number | 0 / 100 | |
step | number | 1 | |
onValueChange | (value: number[]) => void | Chiamata continuamente durante il trascinamento. | |
onValueCommit | (value: number[]) => void | Chiamata una sola volta, al rilascio — usala invece di onValueChange per qualsiasi cosa costosa (una chiamata API), stessa distinzione degli eventi input/change. | |
orientation | "horizontal" | "vertical" | "horizontal" | La versione verticale necessita di un'altezza esplicita via className (h-44 sopra) — non ha un'altezza intrinseca propria. |
disabled | boolean | false |
Accessibilità
Ogni cursore è un vero elemento focalizzabile con ruolo ARIA slider. ←/→ (o ↑/↓ in verticale) regolano di uno step, Home/End saltano a min/max. aria-label viene applicato automaticamente per cursore, con suffisso dell'indice ("Fascia di prezzo 1", "Fascia di prezzo 2") quando ce n'è più di uno — passa un singolo aria-label che copra lo scopo dell'intero slider, non uno per cursore.