Sliders are used to set linear values while providing intuitive visual feedback.
Overview
Sliders allow users to view a selected value, or range of information. Sliders provide a visual indicator, or handle of the current value, which is adjustable. This allows the user to increase or decrease the value(s) by moving the Slider's handle along a horizontal track.
Configurable properties support the ability to add ticks, labels with label, precision handles with precise, and a histogram with has.
Usage
- When offering the user a numeric adjustable value or range
- Adjusting a buffer area
- Opacity or transparency control
- Volume control
- Adjusting or setting a map extent
- A video timeline
Sample
Accessibility
Slider should be accompanied by a Label, which provides context of the intent to support assistive technologies.
Keyboard navigation
| Key | Function |
|---|---|
Arrow left | Reduces the component's value by the step (default value is "1"). |
Arrow right | Increments the component's value by the step (default value is "1"). |
Arrow down | Reduces the component's value by the step (default value is "1"). |
Arrow up | Increments the component's value by the step (default value is "1"). |
Tab | Moves focus in and out of the component. For range values where min and max are set and the currently focused item is the minimum value, focus will proceed to the maximum value. |
Tab and Shift | Moves focus in and out of the component. For range values where min and max are set and the currently focused item is the maximum value, focus will proceed to the minimum value. |