Sliders
Sliders allow users to make selections from a range of values. Material Design 3 sliders feature a track, handle, and optional value indicators.
Live Preview
Volume
50%Price Range
$25 - $75Rating
3 / 512345
Disabled
40%Brand Properties
| Property | Type | Material Default | HoB Value | TAE Value |
|---|---|---|---|---|
| track.height | dimension | 4px | 4px | 4px |
| track.borderRadius | dimension | 2px | 2px | 2px |
| handle.size | dimension | 20px | 20px | 20px |
| handle.elevation | shadow | Level 1 | 0 2px 4px rgba(0,0,0,0.2) | 0 2px 4px rgba(0,0,0,0.2) |
| activeTrack.color | color | #6750A4 | #038012 | #1A5129 |
| inactiveTrack.color | color | #E7E0EC | #E7E0EC | #E7E0EC |
| handle.color | color | #6750A4 | #038012 | #1A5129 |
| tickMark.size | dimension | 4px | 4px | 4px |
| tickMark.activeColor | color | #6750A4 | #038012 | #1A5129 |
| tickMark.inactiveColor | color | #CAC4D0 | #CAC4D0 | #CAC4D0 |
| disabled.trackColor | color | #CAC4D0 | #CAC4D0 | #CAC4D0 |
| touchTarget.minHeight | dimension | 48px | 48px | 48px |
Slider Types
Continuous Slider
Allows users to select any value within a range. Best for approximate values.
Range Slider
Allows users to select a range with two handles. Useful for price or date ranges.
Discrete Slider
Snaps to predefined values with tick marks. Best for specific increments.
Usage Guidelines
- Use continuous sliders when precise values are not required
- Use discrete sliders with tick marks when specific values matter
- Use range sliders for filtering by a range of values
- Always display the current value, especially for precise adjustments
- Consider adding input fields alongside sliders for direct value entry
- Ensure sufficient touch target size (minimum 48px) for mobile use