Component

Material Design 3 sliders tokens

Browse tokens

Token

See more values

Compare token values by selecting another context

Theme
Contrast
More contexts
Platform
Audience
What do 1P and 3P mean?

1P means first-party; 3P means third-party. We interpret 1P Baseline as the configuration for Google's own products, and 3P as the configuration for other developers.

Material supplies these audience labels but does not define them in the captured data. They are not a baseline-versus-Expressive switch.

Font

Enabled
Stop indicator
Stop indicator tokens
TokenValue
Slider stop indicator sizemd.comp.slider.stop-indicator.size
4dp
Slider stop indicator shapemd.comp.slider.stop-indicator.shape
Full
Slider stop indicator trailing spacemd.comp.slider.stop-indicator.trailing-space
4dp
Slider stop indicator colormd.comp.slider.stop-indicator.color
#4A4458
Slider stop indicator color selectedmd.comp.slider.stop-indicator.color-selected
#FFFFFF
Container
Container tokens
TokenValue
Slider with tick marks container sizemd.comp.slider.with-tick-marks.container.size
2dp
Slider with tick marks container shapemd.comp.slider.with-tick-marks.container.shape
Full
Slider with tick marks active container colormd.comp.slider.with-tick-marks.active.container.color
#FFFFFF
Slider active stop indicator container colormd.comp.slider.active.stop-indicator.container.color
#FFFFFF
Slider with tick marks active container opacitymd.comp.slider.with-tick-marks.active.container.opacity
38%
Slider active stop indicator container opacitymd.comp.slider.active.stop-indicator.container.opacity
100%
Slider with tick marks inactive container colormd.comp.slider.with-tick-marks.inactive.container.color
#49454F
Slider inactive stop indicator container colormd.comp.slider.inactive.stop-indicator.container.color
#4A4458
Slider with tick marks inactive container opacitymd.comp.slider.with-tick-marks.inactive.container.opacity
38%
Slider inactive stop indicator container opacitymd.comp.slider.inactive.stop-indicator.container.opacity
100%
Slider label container heightmd.comp.slider.label.container.height
28dp
Slider label container colormd.comp.slider.label.container.color
#6750A4
Slider label container elevationmd.comp.slider.label.container.elevation
0dp
Slider active container opacitymd.comp.slider.active.container.opacity
100%
Slider inactive container opacitymd.comp.slider.inactive.container.opacity
100%
[Deprecated] Label text
[Deprecated] Label text tokens
TokenValue
Slider label label text fontmd.comp.slider.label.label-text.font
Roboto
Slider label label text font sizemd.comp.slider.label.label-text.size
12pt
Slider label label text line heightmd.comp.slider.label.label-text.line-height
16pt
Slider label label text weightmd.comp.slider.label.label-text.weight
500
Slider label label text trackingmd.comp.slider.label.label-text.tracking
0.5pt
Slider label label text colormd.comp.slider.label.label-text.color
#F5EFF7
Slider label label text font sizemd.comp.slider.label.label-text.font-size
12pt
Track
Track tokens
TokenValue
Slider active track heightmd.comp.slider.active.track.height
16dp
Slider inactive track heightmd.comp.slider.inactive.track.height
16dp
Slider active track shapemd.comp.slider.active.track.shape
Full
Slider active track outer corner sizemd.comp.slider.active.track.outer-corner.corner-size
Full
Slider active track inner corner sizemd.comp.slider.active.track.inner-corner.corner-size
Top-right: 2dp · Bottom-right: 2dp
Slider inactive track shapemd.comp.slider.inactive.track.shape
Full
Slider track elevationmd.comp.slider.track.elevation
0dp
Slider active track colormd.comp.slider.active.track.color
#6750A4
Slider inactive track colormd.comp.slider.inactive.track.color
#E8DEF8
Handle
Handle tokens
TokenValue
Slider handle heightmd.comp.slider.handle.height
44dp
Slider handle widthmd.comp.slider.handle.width
4dp
Slider handle shapemd.comp.slider.handle.shape
Full
Slider handle elevationmd.comp.slider.handle.elevation
1dp
Slider handle shadow colormd.comp.slider.handle.shadow-color
#000000
Slider handle colormd.comp.slider.handle.color
#6750A4
Slider active handle colormd.comp.slider.active.handle.color
#6750A4
Slider active handle heightmd.comp.slider.active.handle.height
44dp
Slider active handle widthmd.comp.slider.active.handle.width
4dp
Slider with overlap handle outline colormd.comp.slider.with-overlap.handle.outline.color
#FFFFFF
Slider with overlap handle outline widthmd.comp.slider.with-overlap.handle.outline.width
1dp
Slider active handle shapemd.comp.slider.active.handle.shape
Full
Slider active handle leading spacemd.comp.slider.active.handle.leading-space
6dp
Slider active handle trailing spacemd.comp.slider.active.handle.trailing-space
6dp
Slider active handle paddingmd.comp.slider.active.handle.padding
6dp
[Deprecated] Subhead
[Deprecated] Subhead tokens
TokenValue
Type stylemd.comp.slider.label.label-text.type
Roboto · 12pt · weight 500 · line height 16pt · tracking 0.5pt
[Deprecated] State layer
[Deprecated] State layer tokens
TokenValue
Slider state layer sizemd.comp.slider.state-layer.size
40dp
Disabled
Stop indicator
Stop indicator tokens
TokenValue
Slider disabled stop color inactive trackmd.comp.slider.disabled.stop-indicator.color
#1D1B20
Slider disabled stop color active trackmd.comp.slider.disabled.stop-indicator.color-selected
#F5EFF7
Slider disabled active stop indicator container colormd.comp.slider.disabled.active.stop-indicator.container.color
#F5EFF7
Slider disabled inactive stop indicator container colormd.comp.slider.disabled.inactive.stop-indicator.container.color
#1D1B20
[Deprecated] Container
[Deprecated] Container tokens
TokenValue
Slider with tick marks disabled container colormd.comp.slider.with-tick-marks.disabled.container.color
#1D1B20
Slider disabled stop indicator container colormd.comp.slider.disabled.stop-indicator.container.color
#1D1B20
Slider with tick marks disabled container opacitymd.comp.slider.with-tick-marks.disabled.container.opacity
38%
Slider disabled stop indicator container opacitymd.comp.slider.disabled.stop-indicator.container.opacity
38%
Track
Track tokens
TokenValue
Slider disabled active track colormd.comp.slider.disabled.active.track.color
#1D1B20
Slider disabled active track opacitymd.comp.slider.disabled.active.track.opacity
38%
Slider disabled inactive track colormd.comp.slider.disabled.inactive.track.color
#1D1B20
Slider disabled inactive track opacitymd.comp.slider.disabled.inactive.track.opacity
12%
Handle
Handle tokens
TokenValue
Slider disabled handle colormd.comp.slider.disabled.handle.color
#1D1B20
Slider disabled handle elevationmd.comp.slider.disabled.handle.elevation
0dp
Slider disabled handle opacitymd.comp.slider.disabled.handle.opacity
38%
Slider disabled handle widthmd.comp.slider.disabled.handle.width
4dp
Hovered
[Deprecated] Stop
[Deprecated] Stop tokens
TokenValue
Slider hover stop colormd.comp.slider.hover.stop.color
#6750A4
[Deprecated] State layer
[Deprecated] State layer tokens
TokenValue
Slider hover state layer colormd.comp.slider.hover.state-layer.color
#6750A4
Slider hover state layer opacitymd.comp.slider.hover.state-layer.opacity
8%
Handle
Handle tokens
TokenValue
Slider hover handle colormd.comp.slider.hover.handle.color
#6750A4
Slider hover handle widthmd.comp.slider.hover.handle.width
4dp
Focused
Track
Track tokens
TokenValue
Slider focus active track colormd.comp.slider.focus.active.track.color
#6750A4
Slider focus inactive track colormd.comp.slider.focus.inactive.track.color
#E8DEF8
[Deprecated] Stop
[Deprecated] Stop tokens
TokenValue
Slider focus stop colormd.comp.slider.focus.stop.color
#6750A4
[Deprecated] State layer
[Deprecated] State layer tokens
TokenValue
Slider focus state layer colormd.comp.slider.focus.state-layer.color
#6750A4
Slider focus state layer opacitymd.comp.slider.focus.state-layer.opacity
10%
Handle
Handle tokens
TokenValue
Slider focus handle colormd.comp.slider.focus.handle.color
#6750A4
Slider focus handle widthmd.comp.slider.focus.handle.width
2dp
Pressed (ripple)
[Deprecated] State layer
[Deprecated] State layer tokens
TokenValue
Slider pressed state layer colormd.comp.slider.pressed.state-layer.color
#6750A4
Slider pressed state layer opacitymd.comp.slider.pressed.state-layer.opacity
10%
Handle
Handle tokens
TokenValue
Slider pressed handle colormd.comp.slider.pressed.handle.color
#6750A4
Slider pressed handle widthmd.comp.slider.pressed.handle.width
2dp
Track
Track tokens
TokenValue
Slider pressed active track colormd.comp.slider.pressed.active.track.color
#6750A4
Slider pressed inactive track colormd.comp.slider.pressed.inactive.track.color
#E8DEF8
[Deprecated] Stop
[Deprecated] Stop tokens
TokenValue
Slider pressed stop colormd.comp.slider.pressed.stop.color
#6750A4
Value indicator
Value indicator tokens
TokenValue
Slider value indicator container colormd.comp.slider.value-indicator.container.color
#322F35
Slider value indicator label fontmd.comp.slider.value-indicator.label.label-text.font
Roboto
Slider value indicator label font colormd.comp.slider.value-indicator.label.label-text.color
#F5EFF7
Slider value indicator label line heightmd.comp.slider.value-indicator.label.label-text.line-height
20pt
Slider value indicator label sizemd.comp.slider.value-indicator.label.label-text.size
14pt
Slider value indicator label trackingmd.comp.slider.value-indicator.label.label-text.tracking
0.5pt
Slider value indicator label weightmd.comp.slider.value-indicator.label.label-text.weight
400
Slider value indicator active bottom spacemd.comp.slider.value-indicator.active.bottom-space
12dp