Best practices
Sliders provide a visual indication of adjustable content, where the user can increase or decrease the value by moving the handle along a horizontal track.
Anatomy
- Label: Text that clearly indicates to the user about the content they are providing.
- Value: The position of the bar translated to a value
- Helper text (optional): Assistive text that can provide additional aid or context to the user. Often used to explain the correct data format or limitations.
- Bar: Indicates how much of the container has been filled.
- Handle: Interactive element for users to adjust the value.
- Container: The static area that the bar and handle moves on top of and acts as a fixed visual reference of the max range.
Variants
Multiple values
Single values
