DSFR v1.12.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-2485-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-2484" name="range-2484" type="range" aria-labelledby="range-2484-label" max="100" value="50" aria-describedby="range-2484-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-2484-messages" aria-live="polite">
    </div>
</div>

Curseur simple taille SM

50 

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

Curseur simple sans les indicateurs min/max

50 

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

Curseur avec étapes

50 

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

Curseur avec étapes taille SM

50 

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

Curseur double avec valeurs min et max

25 

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

Curseur double taille SM

25 

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

Curseur avec préfixe et suffixe

~50% 

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

Curseur désactivé

50 

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

Curseur avec étape désactivé

50 

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

Curseur double désactivé

20 

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

Paramètres d’affichage

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