Slider
Sliders allow the user to pick a value between a range of values.
Anatomy
A) Filller B) Label C) Thumb D) Track E) Input
Variations
Slider
Used to select a single value between a range.
Range
Used to select two values between a range.
Sizes
Slider size
Small - Used to create a compact layout. Medium - The go to slider size.
Usage Guidelines
Values must be known
Do not use sliders when values are unknown or subject to change.
Exact control
If an exact number is needed, consider an input box instead.
Consider the scale
The track width needs to allow sufficient control of the value.
Show the range values
Where possible, display the min and max values of the slider.
Be transparent
Use tooltips to display the current value when hovering over the slider.
Don’t be evil
Please never do this.