Range slider

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.

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

Implementation

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

Package information

  • Package usage: @import form-controls
  • Requires: required, global

References