Slider
Inset track with a small Level 2 thumb shadow, designed for nested surfaces.
Basic Slider
Volume50%
Slider with Tooltip
Temperature Control
ColdHot
Range Slider
Price Range$25 - $75
Slider with Tick Marks
Quality (steps of 25)50%
0255075100
Slider with Icons
Volume Control
Brightness
Gradient Track
Color Temperature
CoolWarm
Hue Selection
Performance Level
LowMediumHigh
Custom Handle Styles
Square Handle
Large Handle
Small Handle
Vertical Slider
Vertical sliders use a centered shadow style for better visual alignment.
Bass
Mid
Treble
Gain
Disabled State
Brightness (Disabled)
Best Practices
Standalone (Thumb: Level 2)
Track is inset by default; thumb keeps a small shadow for affordance.
Nested in Card (Noise Reduced)
When the container already carries elevation, flatten the thumb to keep the budget clean.
Anti-patterns
Too much elevation
Avoid giving both track and thumb strong shadows — it fights the container.
Correct
Keep the track inset and thumb subtle; let the outer surface own the main elevation.