Range slider
Curseur interactif permettant de sélectionner une valeur sur une échelle définie entre un minimum et un maximum.
Description
Le range slider est un curseur interactif permettant de sélectionner une valeur sur une échelle définie entre un minimum et un maximum. (ex. : volume sonore, prix, durée).
Il permet un réglage rapide sans saisie manuelle, tout en affichant un retour immédiat à l’utilisateur.
Il permet un réglage rapide sans saisie manuelle, tout en affichant un retour immédiat à l’utilisateur.
Plateformes
Anatomie
- Label : indique à l'utilisateur les informations attendues dans l'input
- Required (optionnel) : indique si l'input est requis
- Tooltip (optionnel) : permet à l'utilisateur d'avoir plus de détail sur ce que est attendu dans l'input
- Valeur actuelle : affiche la valeur numérique sélectionnée en temps réel
- Poignée : élément interactif permettant de déplacer la valeur sur la piste
- Bouton de diminution : réduit la valeur par "pas" prédéfini
- Bouton d’augmentation : augmente la valeur par "pas" prédéfini
- Valeur minimale : seuil le plus bas possible
- Valeur maximale : seuil le plus haut possible
- Helper (optionnel) : indique les règles de saisie du champ
Usage
Quand l'utiliser ?
S'utilise dans les cas suivants :
- Pour ajuster une valeur continue (ex. : luminosité, volume).
- Lorsque l’utilisateur a besoin d’un contrôle rapide et visuel plutôt qu’une saisie précise.
- Pour éviter un formulaire trop chargé avec des champs numériques.
Anatomie
- Label : indique à l'utilisateur les informations attendues dans l'input
- Required (optionnel) : indique si l'input est requis
- Tooltip (optionnel) : permet à l'utilisateur d'avoir plus de détail sur ce que est attendu dans l'input
- Valeur actuelle : affiche la valeur numérique sélectionnée en temps réel
- Poignée : élément interactif permettant de déplacer la valeur sur la piste
- Bouton de diminution : réduit la valeur par "pas" prédéfini
- Bouton d’augmentation : augmente la valeur par "pas" prédéfini
- Valeur minimale : seuil le plus bas possible
- Valeur maximale : seuil le plus haut possible
- Helper (optionnel) : indique les règles de saisie du champ
Usage
Quand l'utiliser ?
S'utilise dans les cas suivants :
- Pour ajuster une valeur continue (ex. : luminosité, volume).
- Lorsque l’utilisateur a besoin d’un contrôle rapide et visuel plutôt qu’une saisie précise.
- Pour éviter un formulaire trop chargé avec des champs numériques.
Des questions ou un feedback ?
N’hésitez pas à contacter la team Design System par mail.