RangeSlider

RangeSlider is a component used for users to select a range of related values.

The RangeSlider follows the WAI-ARIA - Slider (Multi-Thumb) Pattern for accessibility.

If you are not using Fieldset, set aria-label or aria-labelledby to RangeSlider.

<RangeSlider aria-label="Hotel Price Range" />

Copied!

<VStack gap="sm">
  <Text as="h3" id="label">
    Hotel Price Range
  </Text>

  <RangeSlider aria-labelledby="label" />
</VStack>

Copied!

For example, if the day of the week is represented by a number and the value of aria-valuenow is not user-friendly, set aria-valuetext to a human-readable string such as "Monday".

const weekday = [
  "Sunday",
  "Monday",
  "Tuesday",
  "Wednesday",
  "Thursday",
  "Friday",
  "Saturday",
]

return (
  <RangeSlider getAriaValueText={(value) => weekday[value]} max={6} min={0} />
)

Copied!

Key	Description	State
`ArrowRight`	Increases the value based on the `step` value.	-
`ArrowLeft`	Decreases the value based on the `step` value.	-
`ArrowUp`	Increases the value based on the `step` value.	-
`ArrowDown`	Decreases the value based on the `step` value.	-
`Home`	Sets the value to `min`.	-
`End`	Sets the value to `max`.	-
`PageUp`	Increases the value based on the `min` and `max` values.	-
`PageDown`	Decreases the value based on the `min` and `max` values.	-

ARIA Roles and Attributes

Component	Roles and Attributes	Usage
`RangeSliderStartThumb`, `RangeSliderEndThumb`	`role="slider"`	Indicates that this is a slider.
	`aria-label`	Sets `"Slider thumb"`.
	`aria-orientation`	Sets `"horizontal"` or `"vertical"` based on the `orientation` value. Default is `"horizontal"`.
	`aria-valuemin`	Sets the `min` value. Default is `0`.
	`aria-valuemax`	Sets the `max` value. Default is `100`.
	`aria-valuenow`	Sets the current value.
	`aria-valuetext`	Sets the current value.
	`aria-readonly`	Set to `"true"` if `isReadOnly` is set.
	`aria-disabled`	Set to `"true"` if `isDisabled` is set.
	`aria-invalid`	Set to `"true"` if `isInvalid` is set.
	`aria-required`	Set to `"true"` if `isRequired` is set.
`RangeSliderMark`	`aria-hidden`	Excludes the element from the accessibility tree.
`input` Internal	`type="hidden"`	Excludes the element from the accessibility tree.
	`aria-readonly`	Set to `"true"` if `isReadOnly` is set.
	`aria-disabled`	Set to `"true"` if `isDisabled` is set.
	`aria-invalid`	Set to `"true"` if `isInvalid` is set.
	`aria-required`	Set to `"true"` if `isRequired` is set.

Edit this page on GitHub

PreviousSlider NextHueSlider