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-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">
        <span class="fr-range__output">50</span>
        <input id="range-2265" name="range-2265" type="range" aria-labelledby="range-2265-label" max="100" value="50" 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 simple taille SM

50 

<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">
        <span class="fr-range__output">50</span>
        <input id="range-2270" name="range-2270" type="range" aria-labelledby="range-2270-label" max="100" value="50" 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 simple sans les indicateurs min/max

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">
        <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">
    </div>
    <div class="fr-messages-group" id="range-2275-messages" aria-live="polite">
    </div>
</div>

Curseur avec étapes

50 

<div class="fr-range-group" 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 fr-range--step">
        <span class="fr-range__output">50</span>
        <input id="range-2280" name="range-2280" type="range" aria-labelledby="range-2280-label" max="100" value="50" step="10" 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>

Curseur avec étapes taille SM

50 

<div class="fr-range-group" 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 fr-range--sm fr-range--step">
        <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" step="10" 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">
    </div>
</div>

Curseur double avec valeurs min et max

25 

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

Curseur double taille SM

25 

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

Curseur avec préfixe et suffixe

~50% 

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

Curseur désactivé

50 

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

Paramètres d’affichage

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