Using this Component
Sliders should be used when allowing a user to select between a continuous range of values.
Having a continuous and granular range of values is critical for the slider to feel smooth and intuitive. Because of this, sliders are uncommon components, used only when all possible values conform to a consistent, continuous, and granular pattern.
All sliders should be clearly labeled. To provide more context to the feature, the slider can be used beneath a UIHeader.
1. Selected Value Indication
The currently selected value is displayed immediately above the current position of the slider toggle. Units are included in this value, when relevant.
2. Slider Toggle
This is the draggable element on the slider. It corresponds to the selected value’s placement within the range of possible values.
The slider toggle is moved along a horizontal bar. This bar should be wide enough to easily make an accurate selection, leaving several pixels for each possible value.
Sliders are directly interactive elements. Depending on the context they may be disabled to prevent interactivity.
Contrary to most other interactive components, sliders are manipulated by clicking+dragging the slider toggle. When in focus, the slider toggle can be manipulated with the keyboard by using the arrow keys.
Component code details are not currently available on this site, but we're working on it!
Checkout this UIKit component's code and comments in the codebase for usage examples, props, and more.