Range

The Range component is a user interface element that allows users to easily set a minimum and maximum value (a range), using interactive sliders.

  • ??
  • ??
$
$

Accessibility

Adheres to the Slider (multi-thumb) WAI-ARIA design pattern.

Each <RangeGrabber> should have an aria-label prop, describing what that grabber represents. For example, if you have a price range, you might have a low price grabber with an aria-label="Low price" and a high price grabber with an aria-label="High price".