Slider

Rendu DOM du slider.

Tout le calcul — pas, bornes, pourcentages, poignée la plus proche, non-croisement — vit dans useSliderState. Ce fichier ne garde que ce qui est propre au web : la mesure de la piste, les événements souris et le JSX.

Installation

sia-ui add slider

Ou par le paquet, sans rien copier :

import { Slider } from "@sia-ui/react-web";

Props

Prop	Type	Défaut	Description
className	string	—
defaultValue	any	—	Valeur de départ en mode non contrôlé.
disabled	boolean	—
endLabel	string	—	Libellé de la poignée haute, en mode plage.
formatValue	(value: number) => string	—	Rendu de la valeur affichée — devise, unité, arrondi.
max	number	100
min	number	0
minDistance	number	0	Écart minimal entre les deux poignées, en mode plage.
name	string	—	Nom du champ, quand le slider est posé dans un formulaire.
onChange	(value: SliderValue) => void	—
onValueChange	(value: SliderValue) => void	—	Alias de onChange, tel que l'attendaient les composants du registre. Les deux sont appelés.
range	boolean	false
showValue	boolean	false	Affiche la valeur courante à côté de la piste.
startLabel	string	—	Libellé de la poignée basse, annoncé aux lecteurs d'écran. Par défaut, slider.thumb de la locale.
step	number	1
tooltipProps	Partial<Omit<TooltipProps, "children" | "content">>	—	Réglages de la bulle qui affiche la valeur au-dessus de chaque poignée — placement, ton, délai. Son contenu reste la valeur formatée.
value	any	—	Mode contrôlé. Laisser vide pour un slider non contrôlé.

Voir aussi

• Le composant dans le catalogue — états, variantes, et bac à sable.
• La référence complète — tous les composants.