The 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.
- Package usage: