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
Vue d’ensemble
Cette section offre un aperçu des contextes d’utilisation, de l’anatomie du composant et des contenus. Pour plus d’informations sur la composition, le comportement et les interactions, consulter l’onglet « Spécifications ».
Variantes disponibles
Le curseur peut être présenté de différentes manières selon les besoins de l’interface :
- Curseur à une seule poignée
- Curseur à deux poignées
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.
Curseur à une seule poignée
Utilisé lorsque l’utilisateur a besoin de définir une seule valeur, par exemple pour un montant maximal.
Curseur à deux poignées
Utilisé pour spécifier une plage de valeurs, comme une plage de prix ou de distances.
Quand ne pas l’utiliser
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).
Anatomie
- Barre de progression
- Poignée
- Valeurs repères minimales et maximales
- Champ numérique
Contenus
Information détaillée sur les éléments spécifiques présents dans l’interface, y compris des explications sur leur fonctionnement et leur utilisation optimale.
Valeurs repères minimales et maximales
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.
Champ numérique
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é.
Spécifications
Cette section présente des informations techniques sur la composition, les comportements fonctionnels et les interactions du composant. Les spécifications techniques détaillées sont disponibles dans la trousse de design.
Composition
Description détaillée des éléments constitutifs du composant, avec des informations précises sur son anatomie.
Curseur (complet)
Dimensions : Le curseur doit avoir une longueur suffisante pour permettre à l’utilisateur de définir une plage ou une valeur précise sans difficulté.
Espacements : Un espacement de 32 px doit être respecté au-dessus et en dessous du commutateur.
Poignée
Dimensions : Dans le format mobile, la poignée doit être plus grosse afin d’assurer une meilleure précision au toucher. Peu importe le format, sa zone cliquable est de 40 px.
Comportements
Description des interactions possibles avec les éléments du composant, y compris l’utilisation de la souris et du clavier pour naviguer et effectuer des actions.
Fonctionnel
Fonctionnalités principales et secondaires, ainsi que leur comportement et les actions qu’ils déclenchent.
Curseur (complet)
Le curseur permet de définir une valeur ou une plage de valeurs.
Il offre un retour visuel immédiat lors du déplacement de la poignée, permettant à l’utilisateur de voir instantanément l’effet de son action.
Si possible, les incréments doivent être magnétiques.
Poignée
La poignée du curseur peut être déplacée par l’utilisateur pour ajuster la valeur ou la plage de valeurs. Elle est conçue pour être facilement manipulable, particulièrement sur les appareils mobiles.
Interaction
Assistance sur la manière d’interagir avec le composant, que ce soit via la souris ou le clavier.
Souris
Instructions sur l’interaction avec le composant via la souris :
- Cliquer et glisser la poignée pour ajuster la valeur.
- Cliquer directement sur le curseur pour déplacer la poignée à une position précise.
Clavier
Instructions sur l’interaction avec le composant via le clavier :
- Utiliser les touches fléchées pour ajuster la valeur.
- Appuyer sur la touche Tab pour naviguer vers d’autres éléments de l’interface.
Contribuer à améliorer le système de design
Pour nous assurer que cette page est utile et à jour, vous pouvez remplir le formulaire de demandes destinées à l’équipe Design de la Direction des communications numériques gouvernementales. Vous pouvez utiliser ce formulaire pour :
- nous transmettre des questions ou commentaires sur le système de design ;
- être ajouté à la liste d'envoi du système de design ;
- faire une demande de trousse, d'information pour un nouveau projet, etc. ;
- rapporter un bogue dans le site Web ou dans la trousse de développement.
Dernière mise à jour : 15 janvier 2026