Skip to content

Latest commit

 

History

History
339 lines (268 loc) · 10.9 KB

Slider.mdx

File metadata and controls

339 lines (268 loc) · 10.9 KB

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";

Slider

Component Version DS Version
Added 0.25.4
Latest 3.3.2

Table of Contents

  • {Overview}
  • {Component Props}
  • {Accessibility}
  • {RangeSlider}
  • {Examples}
  • {Get Input Values}
  • {Programmatically Update}
  • {Changelog}

Overview

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.

Component Props

Accessibility

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:

Slider Accessibility Implementation

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.

RangeSlider

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.

RangeSlider Accessibility Implementation

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.

Examples

Single Slider States

Range Slider States

To enable the Range Slider, set the isRangeSlider prop to true.

Single Slider Variants

In the following example, the min/max values and the current value text input are hidden.

For the following examples, all labels are hidden.

Range Slider with Adjusted Handles

In the following examples, all the labels are hidden.

Get Input Values

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.

Single Slider Value

Open up the browser's developer console to see the value of the Slider after updating it.

{ console.log(\`The single Slider updated value is: \${newValue}\`); }; return ( ); } `} language="tsx" />

Range Slider Values

Open up the browser's developer console to see the values of the Slider after updating it in the isRangeSlider state.

{ const [start, end] = newValue; console.log(\`The Range Slider updated start value is: \${start}\`); console.log(\`The Range Slider updated end value is: \${end}\`); }; return ( ); } `} language="tsx" />

Get Final Slider Value

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.

Single Slider Value

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.

{ console.log(\`The single Slider updated value is: \${newValue}\`); }; return ( ); } `} language="tsx" />

Range Slider Values

Open up the browser's developer console to see the values of the Slider after updating it in the isRangeSlider state.

{ const [start, end] = newValue; console.log(\`The Range Slider updated start value is: \${start}\`); console.log(\`The Range Slider updated end value is: \${end}\`); }; return ( ); } `} language="tsx" />

Programmatically Update

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.

{ setValue([newValue.target.value, value[1]]); }; const onChangeSecond = (newValue) => { setValue([value[0], newValue.target.value]); }; return ( ); } `} language="tsx" />

Changelog