DSFR v1.13.0

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-2098-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-2097" name="range-2097" type="range" aria-labelledby="range-2097-label" max="100" value="50" aria-describedby="range-2097-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-2097-messages" aria-live="polite">
    </div>
</div>

Curseur simple taille SM

50 

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

Curseur simple sans les indicateurs min/max

50 

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

Curseur avec étapes

50 

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

Curseur avec étapes taille SM

50 

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

Curseur double avec valeurs min et max

25 

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

Curseur double taille SM

25 

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

Curseur avec préfixe et suffixe

~50% 

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

Curseur désactivé

50 

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

Curseur avec étape désactivé

50 

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

Curseur double désactivé

20 

<div class="fr-range-group fr-range-group--disabled" id="range-2148-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-2147" name="range-2147" type="range" aria-labelledby="range-2147-label" max="100" value="20" disabled aria-describedby="range-2147-messages">
        <input id="range-2147-2" name="range-2147-2" type="range" aria-labelledby="range-2147-label" max="100" value="80" disabled aria-describedby="range-2147-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-2147-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-2153-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-2152" name="range-2152" type="range" aria-labelledby="range-2152-label" max="100" value="50" aria-describedby="range-2152-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-2152-messages" aria-live="polite">
        <p class="fr-message fr-message--error" id="range-2152-message-error">Valeur sélectionnée impossible</p>
    </div>
</div>

Paramètres d’affichage

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