Curseur - Range 🆕

Le composant curseur est un input composé d'entrées numériques permettant de délimiter manuellement une sélection par rapport à une valeur minimale et maximale. Ils sert à montrer en temps réel les options choisies et éclairer la prise de décision.

Structure

Le curseur se compose des éléments suivants :

Label (obligatoire)
Texte de description additionnel (optionnel)
Piste avec poignée et valeur sélectionnée (obligatoire)
Valeur min et max (optionnel)
Message d’information défaut ou erreur (optionnel)

Variations

Le curseur existe en deux version SM et MD :

En desktop la taille minimum est 180 px et la taille minimum est 588 px ;
En mobile la taille minimum est 136 px et la taille minimum est 288 px ;
En mobile, préférez la version MD.

Taille SM

Curseur simple

Label Texte de description additionnel, valeur de 0 à 100.

50

                      <div class="fr-range-group" id="range-2246-group">
    <label class="fr-label">
        Label
        <span class="fr-hint-text">Texte de description additionnel, valeur de 0 à 100.</span>
    </label>
    <div class="fr-range fr-range--sm">
        <span class="fr-range__output">50</span>
        <input id="range-2245" name="range-2245" type="range" aria-labelledby="range-2245-label" max="100" value="50" aria-describedby="range-2245-messages">
        <span class="fr-range__min" aria-hidden="true">0</span>
        <span class="fr-range__max" aria-hidden="true">100</span>
    </div>
    <div class="fr-messages-group" id="range-2245-messages" aria-live="polite">
    </div>
</div>

Curseur double

Label Texte de description additionnel, valeur de 0 à 100.

25

                      <div class="fr-range-group" id="range-2271-group">
    <label class="fr-label">
        Label
        <span class="fr-hint-text">Texte de description additionnel, valeur de 0 à 100.</span>
    </label>
    <div class="fr-range fr-range--sm fr-range--double">
        <span class="fr-range__output">25</span>
        <input id="range-2270" name="range-2270" type="range" aria-labelledby="range-2270-label" max="100" value="25" aria-describedby="range-2270-messages">
        <input id="range-2270-2" name="range-2270-2" type="range" aria-labelledby="range-2270-label" max="100" aria-describedby="range-2270-messages">
        <span class="fr-range__min" aria-hidden="true">0</span>
        <span class="fr-range__max" aria-hidden="true">100</span>
    </div>
    <div class="fr-messages-group" id="range-2270-messages" aria-live="polite">
    </div>
</div>

Curseur cranté

Label Texte de description additionnel, valeur de 0 à 100.

50

                      <div class="fr-range-group" id="range-2261-group">
    <label class="fr-label">
        Label
        <span class="fr-hint-text">Texte de description additionnel, valeur de 0 à 100.</span>
    </label>
    <div class="fr-range fr-range--sm fr-range--step">
        <span class="fr-range__output">50</span>
        <input id="range-2260" name="range-2260" type="range" aria-labelledby="range-2260-label" max="100" value="50" step="10" aria-describedby="range-2260-messages">
        <span class="fr-range__min" aria-hidden="true">0</span>
        <span class="fr-range__max" aria-hidden="true">100</span>
    </div>
    <div class="fr-messages-group" id="range-2260-messages" aria-live="polite">
    </div>
</div>

Taille MD

Curseur simple

Label Texte de description additionnel, valeur de 0 à 100.

50

                      <div class="fr-range-group" id="range-2241-group">
    <label class="fr-label">
        Label
        <span class="fr-hint-text">Texte de description additionnel, valeur de 0 à 100.</span>
    </label>
    <div class="fr-range">
        <span class="fr-range__output">50</span>
        <input id="range-2240" name="range-2240" type="range" aria-labelledby="range-2240-label" max="100" value="50" aria-describedby="range-2240-messages">
        <span class="fr-range__min" aria-hidden="true">0</span>
        <span class="fr-range__max" aria-hidden="true">100</span>
    </div>
    <div class="fr-messages-group" id="range-2240-messages" aria-live="polite">
    </div>
</div>

Curseur double

Label Texte de description additionnel, valeur de 0 à 100.

25

                      <div class="fr-range-group" id="range-2266-group">
    <label class="fr-label">
        Label
        <span class="fr-hint-text">Texte de description additionnel, valeur de 0 à 100.</span>
    </label>
    <div class="fr-range fr-range--double">
        <span class="fr-range__output">25</span>
        <input id="range-2265" name="range-2265" type="range" aria-labelledby="range-2265-label" max="100" value="25" aria-describedby="range-2265-messages">
        <input id="range-2265-2" name="range-2265-2" type="range" aria-labelledby="range-2265-label" max="100" aria-describedby="range-2265-messages">
        <span class="fr-range__min" aria-hidden="true">0</span>
        <span class="fr-range__max" aria-hidden="true">100</span>
    </div>
    <div class="fr-messages-group" id="range-2265-messages" aria-live="polite">
    </div>
</div>

Curseur cranté

Label Texte de description additionnel, valeur de 0 à 100.

50

                      <div class="fr-range-group" id="range-2256-group">
    <label class="fr-label">
        Label
        <span class="fr-hint-text">Texte de description additionnel, valeur de 0 à 100.</span>
    </label>
    <div class="fr-range fr-range--step">
        <span class="fr-range__output">50</span>
        <input id="range-2255" name="range-2255" type="range" aria-labelledby="range-2255-label" max="100" value="50" step="10" aria-describedby="range-2255-messages">
        <span class="fr-range__min" aria-hidden="true">0</span>
        <span class="fr-range__max" aria-hidden="true">100</span>
    </div>
    <div class="fr-messages-group" id="range-2255-messages" aria-live="polite">
    </div>
</div>

Autres variations

Sans indicateurs minimum et maximum

Label Texte de description additionnel, valeur de 0 à 100.

50

                      <div class="fr-range-group" id="range-2251-group">
    <label class="fr-label">
        Label
        <span class="fr-hint-text">Texte de description additionnel, valeur de 0 à 100.</span>
    </label>
    <div class="fr-range">
        <span class="fr-range__output">50</span>
        <input id="range-2250" name="range-2250" type="range" aria-labelledby="range-2250-label" max="100" value="50" aria-describedby="range-2250-messages">
    </div>
    <div class="fr-messages-group" id="range-2250-messages" aria-live="polite">
    </div>
</div>

Avec préfixe et suffixe

Label Texte de description additionnel, valeur de 0 à 100.

~50%

                      <div class="fr-range-group" id="range-2276-group">
    <label class="fr-label">
        Label
        <span class="fr-hint-text">Texte de description additionnel, valeur de 0 à 100.</span>
    </label>
    <div class="fr-range" data-fr-prefix="~" data-fr-suffix="%">
        <span class="fr-range__output">~50%</span>
        <input id="range-2275" name="range-2275" type="range" aria-labelledby="range-2275-label" max="100" value="50" aria-describedby="range-2275-messages">
        <span class="fr-range__min" aria-hidden="true">~0%</span>
        <span class="fr-range__max" aria-hidden="true">~100%</span>
    </div>
    <div class="fr-messages-group" id="range-2275-messages" aria-live="polite">
    </div>
</div>

Désactivé

Label Texte de description additionnel, valeur de 0 à 100.

50

                      <div class="fr-range-group fr-range-group--disabled" id="range-2281-group">
    <label class="fr-label">
        Label
        <span class="fr-hint-text">Texte de description additionnel, valeur de 0 à 100.</span>
    </label>
    <div class="fr-range">
        <span class="fr-range__output">50</span>
        <input id="range-2280" name="range-2280" type="range" disabled aria-labelledby="range-2280-label" max="100" value="50" aria-describedby="range-2280-messages">
        <span class="fr-range__min" aria-hidden="true">0</span>
        <span class="fr-range__max" aria-hidden="true">100</span>
    </div>
    <div class="fr-messages-group" id="range-2280-messages" aria-live="polite">
    </div>
</div>

Avec erreur

Label Texte de description additionnel, valeur de 0 à 100.

50

Valeur sélectionnée impossible

                      <div class="fr-range-group fr-range-group--error" id="range-2286-group">
    <label class="fr-label">
        Label
        <span class="fr-hint-text">Texte de description additionnel, valeur de 0 à 100.</span>
    </label>
    <div class="fr-range">
        <span class="fr-range__output">50</span>
        <input id="range-2285" name="range-2285" type="range" aria-labelledby="range-2285-label" max="100" value="50" aria-describedby="range-2285-messages">
        <span class="fr-range__min" aria-hidden="true">0</span>
        <span class="fr-range__max" aria-hidden="true">100</span>
    </div>
    <div class="fr-messages-group" id="range-2285-messages" aria-live="polite">
        <p class="fr-message fr-message--error" id="range-2285-message-error">Valeur sélectionnée impossible</p>
    </div>
</div>

Règles d'utilisation

Usage

Utilisez un curseur lorsque la valeur saisie est imprécise ou à déterminer : par exemple la luminosité d’un écran. A contrario l’année de naissance est une valeur précise donc préférez un champ de saisie ou une liste déroulante.
Sauf cas exceptionnel, le curseur ne doit pas être utilisé dans les formulaires.
Son usage doit aller de pair avec une actualisation du résultat en temps réel en fonction de la valeur sélectionnée : par exemple en tant que filtre déterminant l’affichage de donnée ou non dans une liste ou un tableau.
La valeur du curseur est toujours en nombre. Des unités peuvent y être ajoutées (k€, €, kg, etc).

A ne pas faire

Évitez d'utiliser un curseur sans fournir un retour visuel immédiat sur les résultats de l'interaction de l'utilisateur.
N'utilisez pas de curseur si le nombre de valeurs spécifiques est important, préférez un champ de saisie ou une liste déroulante au curseur cranté.
N'utilisez pas d’échelle de valeur trop petite, par exemple 1-3 : préférez dans ce cas de figure des cases à cocher ou des boutons radios. Exemple :

Si l’échelle de valeur est large mais que l’espace est limité, un champ de saisie est un meilleur choix.

N'utilisez pas de glissière pour communiquer l’état d’avancement ; utilisez plutôt le composant Indicateur d'étapes.

Accessibilité

Voici les points d'attention à prendre en compte dans l'implémentation du curseur :

Le label du curseur doit expliciter la nature de la valeur sélectionnée
Pouvoir cliquer n'importe où sur la piste horizontale (sauf curseur double)
Pouvoir utiliser les flèches du clavier pour modifier la valeur et l’emplacement de la poignée
Le focus est placé sur la poignée (l'objet visuel que l'utilisateur de la souris déplacerait)

Personnalisation

Aucune personnalisation de ce composant n'est possible.

Contrôle segmenté - Segmented control 🆕

En-tête - Header