A range slider allows users to choose an approximate number from a range.
1 2 3 4 <form class="usa-form"> <label class="usa-label" for="range-slider">Range slider</label> <input id="range-slider" class="usa-range" type="range" min="0" max="100" step="10" value="20"> </form>
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.
- 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
stepattribute 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.
- Customize accessibly. As you customize this form template, ensure it continues to follow the accessibility guidelines for form templates and the accessibility guidelines for form controls.
- Set the
maxattribute of the
inputelement 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.
- Package usage: