import { ArgTypes, Canvas, Description, Meta, Source } from "@storybook/blocks";
import ComponentChangelogTable from "../../utils/ComponentChangelogTable"; import Link from "../Link/Link"; import * as SliderStories from "./Slider.stories"; import { changelogData } from "./sliderChangelogData";
| Component Version | DS Version |
|---|---|
| Added | 0.25.4 |
| Latest | 3.3.2 |
- {Overview}
- {Component Props}
- {Accessibility}
- {RangeSlider}
- {Examples}
- {Get Input Values}
- {Programmatically Update}
- {Changelog}
The text input component doubles as a display for the slider's current value.
For this type of component, the value prop must be a single number.
The Slider component is accessible via keyboard. In addition to the text fields,
a keyboard user can tab to the blue slider thumb and then with left and right
arrows increase or decrease the value. The color contrast between foreground
color and background color is 4.5:1. If text size is 200%, the button scales
with text so there is no overlap. Internally, a Label is associated with the
<input> element.
The labelText value is used to populate a global visual label for component.
The value is also used to generate appropriate aria-label values for the
component's text input and slider thumb. When showLabel is set to false, the
visual label will be removed from the UI, but the value will still be used to
generate the aria-label values for the previously mentioned internal
elements.
In addition to the aria-label attribute, the slider thumb will also contains
the aria-valuemin, aria-valuemax, aria-orientation, and aria-valuenow
attributes.
Resources:
- W3C WAI-Aria Practices - Slider
- W3C WAI-Aria Practices - Slider (Multi-Thumb)
- Chakra Slider
- Chakra RangeSlider
Chakra's Slider component is accessible and, as recommended, we pass in an
aria-label to their Slider component. On top of that, the Reservoir Design
System (DS) Slider component's <label> points to the <input> element
which shows the current value. This input element also has its own
aria-label. When the input box is hidden, the for attribute in the label
element is removed.
Note that Chakra will automatically generate the values for the following aria
attributes on the single slider thumb: aria-valuemin, aria-valuemax,
aria-valuenow, and aria-orientation. However, Chakra does not generate the
value for the aria-label attribute on the single slider thumb. The value for
the aria-label attribute is dependent on the labelText value.
Set isRangeSlider to true to create a range slider. The text input
components double as displays for the slider's current minimum and maximum
value. For this type of component, the value prop must be an array of two
numbers. This signifies the starting and ending values of the range slider.
Similar to the single slider configuration, each of the two sliders in the range
slider configuration will contain the aria-label, aria-valuemin,
aria-valuemax, aria-orientation, and aria-valuenow attributes.
Chakra's RangeSlider component is accessible and, as recommended, we pass in
two aria-label values to their RangeSlider component. The syntax is
different than the expected standard string; the RangeSlider expects
aria-label to be an array of two strings. On top of this, the DS Slider's
<label> element, when in the isRangeSlider state, points to the first
<input> element which shows the current start value. These two input
elements also have their own aria-labels. When the input boxes are hidden, the
for attribute in the label element is removed.
Note that Chakra will automatically generate the values for the following aria
attributes on the two slider thumbs: aria-valuemin, aria-valuemax,
aria-valuenow, and aria-orientation. However, Chakra will not generate the
values for the aria-label attributes on the two slider thumbs. The values for
the aria-label attributes are dependent on the labelText value.
To enable the Range Slider, set the isRangeSlider prop to true.
In the following example, the min/max values and the current value text input are hidden.
For the following examples, all labels are hidden.
In the following examples, all the labels are hidden.
Pass a callback function to the onChange prop to get the current number value
of the Slider component or an array of two numbers when it is a range slider.
Internally, the Slider component handles the state of the current selected
value or values. Once the value(s) is updated, the onChange callback will be
called and the values will be passed. If no onChange callback is provided,
you won't be able to get the updated value(s) of the Slider component.
Open up the browser's developer console to see the value of the Slider
after updating it.
Open up the browser's developer console to see the values of the Slider
after updating it in the isRangeSlider state.
Pass a callback function to the onChangeEnd prop to get the final number value
of the Slider component or an array of two numbers when it is a range slider.
Dragging the slider can trigger lots of updates and the consuming app might
only be interested in the final result after sliding is complete. You can use
onChangeEnd for this.
Open up the browser's developer console to see the value of the Slider after
updating it. Notice the value is updated only when you stop dragging the slider.
Open up the browser's developer console to see the values of the Slider
after updating it in the isRangeSlider state.
The Slider can be updated programmatically through the value prop. Like the
defaultValue prop, the value prop also takes in a single number for the regular
Slider component or an array of two numbers for the "Range" Slider component.
When doing this, the consuming app is controlling the state of the values. By
default, the Slider component internally keeps track of the current value(s)
and returns the value(s) to the consuming app through the onChange callback.
Open up the browser's developer console to see the values of the Slider after
updating the two corresponding input elements below.