Slider

A slider allows a user to select one or more values within a range.

import {Slider} from './Slider';

<Slider label="Vanilla" />

Features

The <input type="range"> HTML element can be used to build a slider, however it is very difficult to style cross browser. Slider helps achieve accessible sliders that can be styled as needed.

• Customizable – Support for one or multiple thumbs, in both horizontal and vertical orientations. The whole slider, or individual thumbs can be disabled. Custom minimum, maximum, and step values are supported as well.
• High quality interactions – Mouse, touch, and keyboard input is supported via the hook. Pressing the track moves the nearest thumb to that position. Text selection and touch scrolling are prevented while dragging.
• Touch friendly – Multiple thumbs or sliders can be dragged at once on multi-touch screens.
• Accessible – Slider thumbs use visually hidden <input> elements for mobile screen reader support, and HTML form integration. <label> and <output> elements are automatically associated to provide context for assistive technologies.
• International – Output value is formatted as a percentage or custom format according to the user's locale. The slider automatically mirrors all interactions in right-to-left languages.

Anatomy