DSFR v1.13.1

Retour

Curseur (range)

Les curseurs sont des entrées numériques qui permettent de voir graphiquement une sélection par rapport a une valeur minimale et maximale. Ils servent à montrer en temps réelle les options choisies et éclairer la prise de décision.

Documentation

Curseur simple

50 

<div class="fr-range-group" id="range-2101-group">
    <label class="fr-label">
        Libellé
        <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-2100" name="range-2100" type="range" aria-labelledby="range-2100-label" max="100" value="50" aria-describedby="range-2100-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-2100-messages" aria-live="polite">
    </div>
</div>

Curseur simple taille SM

50 

<div class="fr-range-group" id="range-2106-group">
    <label class="fr-label">
        Libellé
        <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-2105" name="range-2105" type="range" aria-labelledby="range-2105-label" max="100" value="50" aria-describedby="range-2105-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-2105-messages" aria-live="polite">
    </div>
</div>

Curseur simple sans les indicateurs min/max

50 

<div class="fr-range-group" id="range-2111-group">
    <label class="fr-label">
        Libellé
        <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-2110" name="range-2110" type="range" aria-labelledby="range-2110-label" max="100" value="50" aria-describedby="range-2110-messages">
    </div>
    <div class="fr-messages-group" id="range-2110-messages" aria-live="polite">
    </div>
</div>

Curseur avec étapes

50 

<div class="fr-range-group" id="range-2116-group">
    <label class="fr-label">
        Libellé
        <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-2115" name="range-2115" type="range" aria-labelledby="range-2115-label" max="100" value="50" step="10" aria-describedby="range-2115-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-2115-messages" aria-live="polite">
    </div>
</div>

Curseur avec étapes taille SM

50 

<div class="fr-range-group" id="range-2121-group">
    <label class="fr-label">
        Libellé
        <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-2120" name="range-2120" type="range" aria-labelledby="range-2120-label" max="100" value="50" step="10" aria-describedby="range-2120-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-2120-messages" aria-live="polite">
    </div>
</div>

Curseur double avec valeurs min et max

25 

<div class="fr-range-group" id="range-2126-group">
    <label class="fr-label">
        Libellé
        <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-2125" name="range-2125" type="range" aria-labelledby="range-2125-label" max="100" value="25" aria-describedby="range-2125-messages">
        <input id="range-2125-2" name="range-2125-2" type="range" aria-labelledby="range-2125-label" max="100" value="75" aria-describedby="range-2125-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-2125-messages" aria-live="polite">
    </div>
</div>

Curseur double taille SM

25 

<div class="fr-range-group" id="range-2131-group">
    <label class="fr-label">
        Libellé
        <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-2130" name="range-2130" type="range" aria-labelledby="range-2130-label" max="100" value="25" aria-describedby="range-2130-messages">
        <input id="range-2130-2" name="range-2130-2" type="range" aria-labelledby="range-2130-label" max="100" value="75" aria-describedby="range-2130-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-2130-messages" aria-live="polite">
    </div>
</div>

Curseur avec préfixe et suffixe

~50% 

<div class="fr-range-group" id="range-2136-group">
    <label class="fr-label">
        Libellé
        <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-2135" name="range-2135" type="range" aria-labelledby="range-2135-label" max="100" value="50" aria-describedby="range-2135-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-2135-messages" aria-live="polite">
    </div>
</div>

Curseur désactivé

50 

<div class="fr-range-group fr-range-group--disabled" id="range-2141-group">
    <label class="fr-label">
        Libellé
        <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-2140" name="range-2140" type="range" aria-labelledby="range-2140-label" max="100" value="50" disabled aria-describedby="range-2140-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-2140-messages" aria-live="polite">
    </div>
</div>

Curseur avec étape désactivé

50 

<div class="fr-range-group fr-range-group--disabled" id="range-2146-group">
    <label class="fr-label">
        Libellé
        <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-2145" name="range-2145" type="range" aria-labelledby="range-2145-label" max="100" value="50" step="10" disabled aria-describedby="range-2145-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-2145-messages" aria-live="polite">
    </div>
</div>

Curseur double désactivé

20 

<div class="fr-range-group fr-range-group--disabled" id="range-2151-group">
    <label class="fr-label">
        Libellé
        <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">20</span>
        <input id="range-2150" name="range-2150" type="range" aria-labelledby="range-2150-label" max="100" value="20" disabled aria-describedby="range-2150-messages">
        <input id="range-2150-2" name="range-2150-2" type="range" aria-labelledby="range-2150-label" max="100" value="80" disabled aria-describedby="range-2150-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-2150-messages" aria-live="polite">
    </div>
</div>

Curseur avec erreur

50

Valeur sélectionnée impossible

<div class="fr-range-group fr-range-group--error" id="range-2156-group">
    <label class="fr-label">
        Libellé
        <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-2155" name="range-2155" type="range" aria-labelledby="range-2155-label" max="100" value="50" aria-describedby="range-2155-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-2155-messages" aria-live="polite">
        <p class="fr-message fr-message--error" id="range-2155-message-error">Valeur sélectionnée impossible</p>
    </div>
</div>

Paramètres d’affichage

Choisissez un thème pour personnaliser l’apparence du site.