Communications numériques gouvernementales Beta

Système de design gouvernemental

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é de la composante, 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 #1479cc 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

Le dégagement entre le curseur et les valeurs minimales et maximales est de 8 px dans le format bureau mais augmente à 16 px dans le format mobile

Le dégagement 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: 12 px
Font-weight : 600

 

CSS du champ numérique
Height : 32 px
Width : 48 px
Border : 1px solid #c5ad3

 

Dernière mise à jour : 17 juillet 2020