Slider

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 labelTicks, precision handles with precise, and a histogram with hasHistogram.

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 minValue and maxValue 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 minValue and maxValue are set and the currently focused item is the maximum value, focus will proceed to the minimum value.

API reference

Properties

Events

Methods