Components

Range slider

A range slider allows users to choose an approximate number from a range.

Component preview

<form class="usa-form">
  <label class="usa-label" for="usa-range">Range slider</label>
  <input
    id="usa-range"
    class="usa-range"
    type="range"
    min="0"
    max="100"
    step="10"
    value="20"
    aria-valuemin="0"
    aria-valuemax="100"
    aria-valuenow="20"
    role="slider"
  />
</form>

<form class="usa-form">
  <label class="usa-label" for="usa-range">Range slider</label>
  <input
    id="usa-range"
    class="usa-range"
    type="range"
    min="0"
    max="100"
    step="10"
    value="20"
    aria-valuemin="0"
    aria-valuemax="100"
    aria-valuenow="20"
    role="slider"
  />
</form>

Guidance

When to use the range slider component

When the range is more important than precision. For instance, it could be more important for a target price selector to communicate where the target price falls within a certain range than the precise dollar amount selected.
When a relative value is more important than an exact value. For instance, a volume slider is typically more focussed on the relative loudness of the output rather than the specific decibel level.

When to consider something else

Use a regular text input if a user needs to enter a precise number.

Usability guidance

Highlight the control when selected. The slider control should change color to indicate it is active when a user selects it.
The control must be draggable. Users should be able to drag the slider control or select somewhere along the slider itself to change the value.
Label the limits of the range. When appropriate, label the ends of the slider with the limits of the range (for example: “0/100”, “small/large” or “less expensive/more expensive”).
Don’t be too granular. In a range slider, the relative value is more important than the specific value, so set the step attribute so it’s not too granular. By setting the step to a value of 10-20% of the total range you prevent unnecessary precision and cognitive strain in your users. For example, set step="10" in a total range of 100.

Accessibility

Customize form controls accessibly. If you customize this component, ensure that it continues to meet the accessibility requirements that apply to all form controls.

Using the range slider component

Set the min and max attribute of the input element to correspond to the instructions or labels that accompany the slider.

Range slider settings

This component has no settings.

Range slider variants

This component has no variants.

References

Slider Design: Rules of Thumb [Nielsen Norman Group]
Four Dangerous Navigation Approaches that Can Increase Cognitive Strain [Nielsen Norman Group; See example #4]

Package

Package usage: @forward "usa-range";
Dependencies: uswds-fonts, usa-label

Latest updates

Meaningful code and guidance updates are listed in the following table:

Date	USWDS version	Affects	Breaking	Description
2022-04-28	3.0.0	Assets JavaScript Styles	Breaking	Breaking Updated to Sass module syntax and new package structure. More information: uswds#4656
2022-04-11	2.13.3	Accessibility Styles	No	Added support for high contrast mode and forced colors. All our components now support proper display when users have a forced colors mode set in their operating system. More information: uswds#4610
2021-08-18	2.12.1	Accessibility Markup	No	Added appropriate ARIA attributes to the `input` element. More information: uswds#4270