A slider allows users to select a single value within a given range of values.
- Required indicator
- State indicator
- Helper text
A slider should always include a concise and clearly understood label. However, labels are not required if an adjacent label is included that adequately describes the purpose of the slider and is correctly referenced to the field for accessibility purposes.
A value can be displayed to convey the number selected within the range of the slider. This value should dynamically update as the thumb is adjusted.
Helper text is a great way to eliminate ambiguity by providing additional information about the purpose of the slider. This text may wrap to multiple lines as needed.
The indicator is a preset and styled element within the component, not manually entered as part of the label string. Form elements can be marked as either required or optional.
Sliders include the following states: