A digital services project by FlexionRange Slider
formUSWDS-derivedinteractive
A styled range input with live value display.
Reference: USWDS documentation ↗
Variants
Custom Range Slider
<flex-range-slider>
<label class="flex-label" for="temperature">Temperature</label>
<div class="flex-range-slider__wrapper">
<input class="flex-range-slider__input" id="temperature" name="temperature" type="range" min="0" max="200" value="72" step="5" aria-describedby="temperature-value"/>
<span class="flex-range-slider__value" id="temperature-value" aria-live="polite">72</span>
</div>
</flex-range-slider>Default Range Slider
<flex-range-slider>
<label class="flex-label" for="rating">Rating</label>
<div class="flex-range-slider__wrapper">
<input class="flex-range-slider__input" id="rating" name="rating" type="range" min="0" max="100" value="50" step="1" aria-describedby="rating-value"/>
<span class="flex-range-slider__value" id="rating-value" aria-live="polite">50</span>
</div>
</flex-range-slider>Contract
Class mapping
| USWDS | Flex | Notes |
|---|---|---|
usa-range | .flex-range-slider__input | The range input element |
usa-range__wrapper | .flex-range-slider__wrapper | Flex wrapper for input + value display |
usa-range__value | .flex-range-slider__value | Current value display |
Verified properties
heightwidthfont-sizedisplayBehavior promises
- ✓ Initial value is displayed next to the slider
- ✓ Value display updates on input change
Source CSS
/* flex-range-slider — USWDS Range Slider conformance
Styled range input with live value display */
flex-range-slider {
display: block;
}
.flex-range-slider__wrapper {
display: flex;
flex-direction: row;
align-items: center;
}
.flex-range-slider__input {
appearance: none;
border: 0;
inline-size: 100%;
max-inline-size: var(--flex-control-max-width);
block-size: 2.5rem;
margin-block-start: 0.5rem;
padding-inline: 1px;
background: transparent;
font-size: var(--flex-text-uswds);
&:focus {
outline: 0;
&::-webkit-slider-thumb {
background-color: var(--flex-color-bg);
box-shadow: 0 0 0 2px var(--flex-color-focus);
}
&::-moz-range-thumb {
background-color: var(--flex-color-bg);
box-shadow: 0 0 0 2px var(--flex-color-focus);
}
}
/* Track — WebKit */
&::-webkit-slider-runnable-track {
background-color: var(--flex-color-bg-subtle);
border-radius: 99rem;
border: 1px solid var(--flex-color-text-muted);
cursor: pointer;
block-size: 1rem;
inline-size: 100%;
}
/* Track — Firefox */
&::-moz-range-track {
background-color: var(--flex-color-bg-subtle);
border-radius: 99rem;
border: 1px solid var(--flex-color-text-muted);
cursor: pointer;
block-size: 1rem;
inline-size: 100%;
}
/* Thumb — WebKit */
&::-webkit-slider-thumb {
appearance: none;
block-size: 1.25rem;
inline-size: 1.25rem;
border-radius: 99rem;
background: var(--flex-color-bg-subtle);
border: 0;
box-shadow: 0 0 0 2px var(--flex-color-text-muted);
cursor: pointer;
margin-block-start: -0.19rem;
outline: 2px solid transparent;
}
/* Thumb — Firefox */
&::-moz-range-thumb {
block-size: 1.25rem;
inline-size: 1.25rem;
border-radius: 99rem;
background: var(--flex-color-bg-subtle);
border: 0;
box-shadow: 0 0 0 2px var(--flex-color-text-muted);
cursor: pointer;
outline: 2px solid transparent;
}
}
/* Value display */
.flex-range-slider__value {
font-size: var(--flex-text-uswds);
line-height: 1.3;
color: var(--flex-color-text);
padding-block-start: 5px;
margin-inline-start: 5px;
min-inline-size: 5%;
max-inline-size: 5%;
}