SOROUSH.DESIGN
Design SystemMarkdownStyled System

RangeInput

A slider: one value on a range, or two or more thumbs for a range of values.

Source

Accessibility

  • Each thumb is a native range input - a slider with aria-valuemin, aria-valuemax and aria-valuenow (as scale shows them) and aria-orientation.
  • Name every thumb: aria-label for one, getAriaLabel for a range, or a FormLabel. Give getAriaValueText where the number alone isn't clear ("30 minutes").
  • The value label and mark labels are decoration, hidden from assistive technology.
  • Right to left, the horizontal arrows and the pointer's direction are mirrored.