Curseur
Le curseur est un élément de contrôle qui permet à l’utilisateur de définir une valeur numérique située entre deux valeurs prédéterminées.
Exemple
Quand l'utiliser
Le curseur permet d’appliquer un filtre à une liste d’éléments. Par exemple, il permet à l’utilisateur de filtrer des emplois en fonction d’une plage de salaires horaires (entre x $ et x $) ou encore de trouver des centres de services dans un rayon de x kilomètres de chez soi.
Comme la manipulation du curseur donne des résultats approximatifs, on peut l’utiliser pour spécifier une plage de prix, mais pas pour demander l’âge exact d’une personne.
Le curseur n’est pas un bon choix si la plage est trop petite (entre 1 et 3) ou trop grande (entre 1 et 1000).
Comment l'utiliser
Le curseur peut être présenté de deux façons selon les besoins.
Il peut être utilisé avec une poignée lorsqu’une seule valeur maximale est nécessaire.
Exemple
Il peut être utilisé avec deux poignées lorsqu’il s’agit d’une plage entre deux valeurs.
Exemple
Les valeurs minimum et maximum sont indiquées à chaque extrémité du curseur et un libellé présente la ou les valeurs définies par l’utilisateur.
En déplaçant la poignée, l’utilisateur doit voir immédiatement les résultats mis à jour. Cela améliore son expérience en lui offrant un retour d’informations direct.
Un champ numérique doit être positionné à proximité du curseur afin d’assurer l’accessibilité du composant, notamment pour les personnes qui ont des problèmes de motricité.
Si possible, les incréments doivent être magnétiques.
Dans le format mobile, la poignée doit être plus grosse afin d’assurer une meilleure précision au toucher.
Exemple
Informations techniques
Curseur
La partie active du curseur est en #1472BF et la partie inactive en #C5CAD2.
Poignée
La poignée a une dimension de 24 px dans le format bureau et de 32 px dans le format mobile. Sa zone cliquable est de 40 px.
Dimensions
L'espacement entre le curseur et les valeurs minimales et maximales est de 16 px.
L'espacement entre le curseur et un champ numérique est de 16 px.
Exemple
CSS des valeurs min. et max.
font-family: Open Sans;
font-size: 12px;
font-weight: 600;
CSS du champ numérique
height: 32px;
width: 48px;
border: 1px solid #6B778A;
Dernière mise à jour : 6 novembre 2023