Skip to content
STYLESCAPE

Range

Examples for the ss-c-range module.

Default

HTML 
<input type="range" class="ss-c-range" aria-label="Volume" min="0" max="100" value="50">

Sizes

HTML 
<div style="display: grid; gap: 24px">
            <input type="range" class="ss-c-range ss-c-range--xs" aria-label="Range (xs)" min="0" max="100" value="50">
            <input type="range" class="ss-c-range ss-c-range--sm" aria-label="Range (sm)" min="0" max="100" value="50">
            <input type="range" class="ss-c-range ss-c-range--lg" aria-label="Range (lg)" min="0" max="100" value="50">
        </div>

Variants

HTML 
<div style="display: grid; gap: 24px">
            <input type="range" class="ss-c-range ss-c-range--primary" aria-label="Range (primary)" min="0" max="100" value="50">
            <input type="range" class="ss-c-range ss-c-range--success" aria-label="Range (success)" min="0" max="100" value="50">
            <input type="range" class="ss-c-range ss-c-range--warning" aria-label="Range (warning)" min="0" max="100" value="50">
            <input type="range" class="ss-c-range ss-c-range--error" aria-label="Range (error)" min="0" max="100" value="50">
        </div>

Value readout

ss-c-range-field puts the label and an <output for="…"> above the slider, with an optional min/max scale below. RangeOutputManager (data-ss="range-output") keeps the output in sync and sets --ss-range-progress so the track fills up to the thumb (Firefox fills it natively). Format the readout with data-ss-output-suffix, -prefix, -decimals and -locale.

40 %
0.75
HTML 
<div style="display: grid; gap: 24px; max-width: 420px" data-ss="range-output">
            <div class="ss-c-range-field">
                <label for="range-volume" class="ss-c-range-field__label">Volume</label>
                <output for="range-volume" class="ss-c-range-field__output" data-ss-output-suffix=" %">40 %</output>
                <input id="range-volume" type="range" class="ss-c-range" min="0" max="100" value="40" style="--ss-range-progress: 40%">
                <span class="ss-c-range-field__min" aria-hidden="true">0</span>
                <span class="ss-c-range-field__max" aria-hidden="true">100</span>
            </div>
            <div class="ss-c-range-field ss-c-range-field--inline">
                <label for="range-opacity" class="ss-c-range-field__label">Opacity</label>
                <input id="range-opacity" type="range" class="ss-c-range ss-c-range--sm" min="0" max="1" step="0.05" value="0.75" style="--ss-range-progress: 75%">
                <output for="range-opacity" class="ss-c-range-field__output" data-ss-output-decimals="2">0.75</output>
            </div>
        </div>