Material Design 3 "Slider" tokens: All tokens
Preview
Inset icons apply to standard single sliders in medium, large, and extra-large sizes. “On interaction” shows the value when a handle is hovered, focused, or pressed.
Browse tokens
Color
Slider - Size - Large
Active track
| Token | Value |
|---|---|
Slider large active track heightmd.comp.slider.large.active.track.height | 56dp md.comp.slider.large.active.track.height |
Slider large active track leading shapemd.comp.slider.large.active.track.shape.leading | 16dp md.comp.slider.large.active.track.shape.leading |
Inactive track
| Token | Value |
|---|---|
Slider large inactive track trailing shapemd.comp.slider.large.inactive.track.height | 56dp md.comp.slider.large.inactive.track.height |
Slider large inactive track trailing shapemd.comp.slider.large.inactive.track.shape.trailing | 16dp md.comp.slider.large.inactive.track.shape.trailing |
Handle
| Token | Value |
|---|---|
Slider large active handle heightmd.comp.slider.large.active.handle.height | 68dp md.comp.slider.large.active.handle.height |
Icon
| Token | Value |
|---|---|
Slider large icon paddingmd.comp.slider.large.icon.padding | 6dp md.comp.slider.large.icon.padding |
Slider large icon sizemd.comp.slider.large.icon.size | 24dp md.comp.slider.large.icon.size |
Slider - Size - Medium
Active track
| Token | Value |
|---|---|
Slider medium active track heightmd.comp.slider.medium.active.track.height | 40dp md.comp.slider.medium.active.track.height |
Slider medium active track leading shapemd.comp.slider.medium.active.track.shape.leading | 12dp md.comp.slider.medium.active.track.shape.leading |
Inactive track
| Token | Value |
|---|---|
Slider medium inactive track heightmd.comp.slider.medium.inactive.track.height | 40dp md.comp.slider.medium.inactive.track.height |
Slider medium inactive track trailing shapemd.comp.slider.medium.inactive.track.shape.trailing | 12dp md.comp.slider.medium.inactive.track.shape.trailing |
Handle
| Token | Value |
|---|---|
Slider medium active handle heightmd.comp.slider.medium.active.handle.height | 44dp md.comp.slider.medium.active.handle.height |
Icon
| Token | Value |
|---|---|
Slider medium icon paddingmd.comp.slider.medium.icon.padding | 6dp md.comp.slider.medium.icon.padding |
Slider medium icon sizemd.comp.slider.medium.icon.size | 24dp md.comp.slider.medium.icon.size |
Slider - Size - Small
Active track
| Token | Value |
|---|---|
Slider small active track heightmd.comp.slider.small.active.track.height | 24dp md.comp.slider.small.active.track.height |
Slider small active track leading shapemd.comp.slider.small.active.track.shape.leading | 8dp md.comp.slider.small.active.track.shape.leading |
Inactive track
| Token | Value |
|---|---|
Slider small inactive track heightmd.comp.slider.small.inactive.track.height | 24dp md.comp.slider.small.inactive.track.height |
Slider small inactive track trailing shapemd.comp.slider.small.inactive.track.shape.trailing | 8dp md.comp.slider.small.inactive.track.shape.trailing |
Handle
| Token | Value |
|---|---|
Slider small active handle heightmd.comp.slider.small.active.handle.height | 44dp md.comp.slider.small.active.handle.height |
Slider - Size - Xlarge
Active track
| Token | Value |
|---|---|
Slider xlarge active track heightmd.comp.slider.xlarge.active.track.height | 96dp md.comp.slider.xlarge.active.track.height |
Slider xlarge active track leading shapemd.comp.slider.xlarge.active.track.shape.leading | 28dp md.comp.slider.xlarge.active.track.shape.leading |
Inactive track
| Token | Value |
|---|---|
Slider xlarge inactive track heightmd.comp.slider.xlarge.inactive.track.height | 96dp md.comp.slider.xlarge.inactive.track.height |
Slider xlarge inactive track trailing shapemd.comp.slider.xlarge.inactive.track.shape.trailing | 28dp md.comp.slider.xlarge.inactive.track.shape.trailing |
Handle
| Token | Value |
|---|---|
Slider xlarge active handle heightmd.comp.slider.xlarge.active.handle.height | 108dp md.comp.slider.xlarge.active.handle.height |
Icon
| Token | Value |
|---|---|
Slider xlarge icon paddingmd.comp.slider.xlarge.icon.padding | 8dp md.comp.slider.xlarge.icon.padding |
Slider xlarge icon sizemd.comp.slider.xlarge.icon.size | 32dp md.comp.slider.xlarge.icon.size |
Slider - Size - Xsmall
Active track
| Token | Value |
|---|---|
Slider xsmall active track heightmd.comp.slider.xsmall.active.track.height | 16dp md.comp.slider.xsmall.active.track.height |
Slider xsmall active track leading shapemd.comp.slider.xsmall.active.track.shape.leading | 8dp md.comp.slider.xsmall.active.track.shape.leading |
Inactive track
| Token | Value |
|---|---|
Slider xsmall inactive track heightmd.comp.slider.xsmall.inactive.track.height | 16dp md.comp.slider.xsmall.inactive.track.height |
Slider xsmall inactive track trailing shapemd.comp.slider.xsmall.inactive.track.shape.trailing | 8dp md.comp.slider.xsmall.inactive.track.shape.trailing |
Handle
| Token | Value |
|---|---|
Slider xsmall active handle heightmd.comp.slider.xsmall.active.handle.height | 44dp md.comp.slider.xsmall.active.handle.height |
Slider
Enabled
Stop indicator
| Token | Value |
|---|---|
Slider stop indicator colormd.comp.slider.stop-indicator.color | #4A4458 md.comp.slider.stop-indicator.color
|
Slider stop indicator color selectedmd.comp.slider.stop-indicator.color-selected | #FFFFFF md.comp.slider.stop-indicator.color-selected
|
Slider stop indicator shapemd.comp.slider.stop-indicator.shape | Full md.comp.slider.stop-indicator.shape
|
Slider stop indicator sizemd.comp.slider.stop-indicator.size | 4dp md.comp.slider.stop-indicator.size |
Slider stop indicator trailing spacemd.comp.slider.stop-indicator.trailing-space | 4dp md.comp.slider.stop-indicator.trailing-space
|
Container
| Token | Value |
|---|---|
Slider active container opacitymd.comp.slider.active.container.opacity | 100% md.comp.slider.active.container.opacity |
Slider active stop indicator container colormd.comp.slider.active.stop-indicator.container.color | #FFFFFF md.comp.slider.active.stop-indicator.container.color
|
Slider active stop indicator container opacitymd.comp.slider.active.stop-indicator.container.opacity | 100% md.comp.slider.active.stop-indicator.container.opacity |
Slider inactive container opacitymd.comp.slider.inactive.container.opacity | 100% md.comp.slider.inactive.container.opacity |
Slider inactive stop indicator container colormd.comp.slider.inactive.stop-indicator.container.color | #4A4458 md.comp.slider.inactive.stop-indicator.container.color
|
Slider inactive stop indicator container opacitymd.comp.slider.inactive.stop-indicator.container.opacity | 100% md.comp.slider.inactive.stop-indicator.container.opacity |
Slider label container colormd.comp.slider.label.container.color | #6750A4 md.comp.slider.label.container.color
|
Slider label container elevationmd.comp.slider.label.container.elevation | 0dp md.comp.slider.label.container.elevation
|
Slider label container heightmd.comp.slider.label.container.height | 28dp md.comp.slider.label.container.height |
Slider with tick marks active container colormd.comp.slider.with-tick-marks.active.container.color | #FFFFFF md.comp.slider.with-tick-marks.active.container.color
|
Slider with tick marks active container opacitymd.comp.slider.with-tick-marks.active.container.opacity | 38% md.comp.slider.with-tick-marks.active.container.opacity |
Slider with tick marks container shapemd.comp.slider.with-tick-marks.container.shape | Full md.comp.slider.with-tick-marks.container.shape
|
Slider with tick marks container sizemd.comp.slider.with-tick-marks.container.size | 2dp md.comp.slider.with-tick-marks.container.size |
Slider with tick marks inactive container colormd.comp.slider.with-tick-marks.inactive.container.color | #49454F md.comp.slider.with-tick-marks.inactive.container.color
|
Slider with tick marks inactive container opacitymd.comp.slider.with-tick-marks.inactive.container.opacity | 38% md.comp.slider.with-tick-marks.inactive.container.opacity |
[Deprecated] Label text
| Token | Value |
|---|---|
Slider label label text colormd.comp.slider.label.label-text.color | #F5EFF7 md.comp.slider.label.label-text.color
|
Slider label label text fontmd.comp.slider.label.label-text.font | Roboto md.comp.slider.label.label-text.font
|
Slider label label text font sizemd.comp.slider.label.label-text.font-size | 12pt md.comp.slider.label.label-text.font-size
|
Slider label label text line heightmd.comp.slider.label.label-text.line-height | 16pt md.comp.slider.label.label-text.line-height
|
Slider label label text font sizemd.comp.slider.label.label-text.size | 12pt md.comp.slider.label.label-text.size
|
Slider label label text trackingmd.comp.slider.label.label-text.tracking | 0.5pt md.comp.slider.label.label-text.tracking
|
Slider label label text weightmd.comp.slider.label.label-text.weight | 500 md.comp.slider.label.label-text.weight
|
Track
| Token | Value |
|---|---|
Slider active track colormd.comp.slider.active.track.color | #6750A4 md.comp.slider.active.track.color
|
Slider active track heightmd.comp.slider.active.track.height | 16dp md.comp.slider.active.track.height |
Slider active track inner corner sizemd.comp.slider.active.track.inner-corner.corner-size | Top-right: 2dp · Bottom-right: 2dp md.comp.slider.active.track.inner-corner.corner-size |
Slider active track outer corner sizemd.comp.slider.active.track.outer-corner.corner-size | Full md.comp.slider.active.track.outer-corner.corner-size
|
Slider active track shapemd.comp.slider.active.track.shape | Full md.comp.slider.active.track.shape
|
Slider inactive track colormd.comp.slider.inactive.track.color | #E8DEF8 md.comp.slider.inactive.track.color
|
Slider inactive track heightmd.comp.slider.inactive.track.height | 16dp md.comp.slider.inactive.track.height |
Slider inactive track shapemd.comp.slider.inactive.track.shape | Full md.comp.slider.inactive.track.shape
|
Slider track elevationmd.comp.slider.track.elevation | 0dp md.comp.slider.track.elevation
|
Handle
| Token | Value |
|---|---|
Slider active handle colormd.comp.slider.active.handle.color | #6750A4 md.comp.slider.active.handle.color
|
Slider active handle heightmd.comp.slider.active.handle.height | 44dp md.comp.slider.active.handle.height |
Slider active handle leading spacemd.comp.slider.active.handle.leading-space | 6dp md.comp.slider.active.handle.leading-space
|
Slider active handle paddingmd.comp.slider.active.handle.padding | 6dp md.comp.slider.active.handle.padding
|
Slider active handle shapemd.comp.slider.active.handle.shape | Full md.comp.slider.active.handle.shape
|
Slider active handle trailing spacemd.comp.slider.active.handle.trailing-space | 6dp md.comp.slider.active.handle.trailing-space
|
Slider active handle widthmd.comp.slider.active.handle.width | 4dp md.comp.slider.active.handle.width |
Slider handle colormd.comp.slider.handle.color | #6750A4 md.comp.slider.handle.color
|
Slider handle elevationmd.comp.slider.handle.elevation | 1dp md.comp.slider.handle.elevation
|
Slider handle heightmd.comp.slider.handle.height | 44dp md.comp.slider.handle.height |
Slider handle shadow colormd.comp.slider.handle.shadow-color | #000000 md.comp.slider.handle.shadow-color
|
Slider handle shapemd.comp.slider.handle.shape | Full md.comp.slider.handle.shape
|
Slider handle widthmd.comp.slider.handle.width | 4dp md.comp.slider.handle.width |
Slider with overlap handle outline colormd.comp.slider.with-overlap.handle.outline.color | #FFFFFF md.comp.slider.with-overlap.handle.outline.color
|
Slider with overlap handle outline widthmd.comp.slider.with-overlap.handle.outline.width | 1dp md.comp.slider.with-overlap.handle.outline.width |
[Deprecated] Subhead
| Token | Value |
|---|---|
Type stylemd.comp.slider.label.label-text.type | Roboto · 12pt · weight 500 · line height 16pt · tracking 0.5pt md.comp.slider.label.label-text.type
|
[Deprecated] State layer
| Token | Value |
|---|---|
Slider state layer sizemd.comp.slider.state-layer.size | 40dp md.comp.slider.state-layer.size |
Disabled
Stop indicator
| Token | Value |
|---|---|
Slider disabled active stop indicator container colormd.comp.slider.disabled.active.stop-indicator.container.color | #F5EFF7 md.comp.slider.disabled.active.stop-indicator.container.color
|
Slider disabled inactive stop indicator container colormd.comp.slider.disabled.inactive.stop-indicator.container.color | #1D1B20 md.comp.slider.disabled.inactive.stop-indicator.container.color
|
Slider disabled stop color inactive trackmd.comp.slider.disabled.stop-indicator.color | #1D1B20 md.comp.slider.disabled.stop-indicator.color
|
Slider disabled stop color active trackmd.comp.slider.disabled.stop-indicator.color-selected | #F5EFF7 md.comp.slider.disabled.stop-indicator.color-selected
|
[Deprecated] Container
| Token | Value |
|---|---|
Slider disabled stop indicator container colormd.comp.slider.disabled.stop-indicator.container.color | #1D1B20 md.comp.slider.disabled.stop-indicator.container.color
|
Slider disabled stop indicator container opacitymd.comp.slider.disabled.stop-indicator.container.opacity | 38% md.comp.slider.disabled.stop-indicator.container.opacity |
Slider with tick marks disabled container colormd.comp.slider.with-tick-marks.disabled.container.color | #1D1B20 md.comp.slider.with-tick-marks.disabled.container.color
|
Slider with tick marks disabled container opacitymd.comp.slider.with-tick-marks.disabled.container.opacity | 38% md.comp.slider.with-tick-marks.disabled.container.opacity |
Track
| Token | Value |
|---|---|
Slider disabled active track colormd.comp.slider.disabled.active.track.color | #1D1B20 md.comp.slider.disabled.active.track.color
|
Slider disabled active track opacitymd.comp.slider.disabled.active.track.opacity | 38% md.comp.slider.disabled.active.track.opacity |
Slider disabled inactive track colormd.comp.slider.disabled.inactive.track.color | #1D1B20 md.comp.slider.disabled.inactive.track.color
|
Slider disabled inactive track opacitymd.comp.slider.disabled.inactive.track.opacity | 12% md.comp.slider.disabled.inactive.track.opacity |
Handle
| Token | Value |
|---|---|
Slider disabled handle colormd.comp.slider.disabled.handle.color | #1D1B20 md.comp.slider.disabled.handle.color
|
Slider disabled handle elevationmd.comp.slider.disabled.handle.elevation | 0dp md.comp.slider.disabled.handle.elevation
|
Slider disabled handle opacitymd.comp.slider.disabled.handle.opacity | 38% md.comp.slider.disabled.handle.opacity |
Slider disabled handle widthmd.comp.slider.disabled.handle.width | 4dp md.comp.slider.disabled.handle.width |
Hovered
[Deprecated] Stop
| Token | Value |
|---|---|
Slider hover stop colormd.comp.slider.hover.stop.color | #6750A4 md.comp.slider.hover.stop.color
|
[Deprecated] State layer
| Token | Value |
|---|---|
Slider hover state layer colormd.comp.slider.hover.state-layer.color | #6750A4 md.comp.slider.hover.state-layer.color
|
Slider hover state layer opacitymd.comp.slider.hover.state-layer.opacity | 8% md.comp.slider.hover.state-layer.opacity
|
Handle
| Token | Value |
|---|---|
Slider hover handle colormd.comp.slider.hover.handle.color | #6750A4 md.comp.slider.hover.handle.color
|
Slider hover handle widthmd.comp.slider.hover.handle.width | 4dp md.comp.slider.hover.handle.width |
Focused
Track
| Token | Value |
|---|---|
Slider focus active track colormd.comp.slider.focus.active.track.color | #6750A4 md.comp.slider.focus.active.track.color
|
Slider focus inactive track colormd.comp.slider.focus.inactive.track.color | #E8DEF8 md.comp.slider.focus.inactive.track.color
|
[Deprecated] Stop
| Token | Value |
|---|---|
Slider focus stop colormd.comp.slider.focus.stop.color | #6750A4 md.comp.slider.focus.stop.color
|
[Deprecated] State layer
| Token | Value |
|---|---|
Slider focus state layer colormd.comp.slider.focus.state-layer.color | #6750A4 md.comp.slider.focus.state-layer.color
|
Slider focus state layer opacitymd.comp.slider.focus.state-layer.opacity | 10% md.comp.slider.focus.state-layer.opacity
|
Handle
| Token | Value |
|---|---|
Slider focus handle colormd.comp.slider.focus.handle.color | #6750A4 md.comp.slider.focus.handle.color
|
Slider focus handle widthmd.comp.slider.focus.handle.width | 2dp md.comp.slider.focus.handle.width |
Pressed (ripple)
[Deprecated] State layer
| Token | Value |
|---|---|
Slider pressed state layer colormd.comp.slider.pressed.state-layer.color | #6750A4 md.comp.slider.pressed.state-layer.color
|
Slider pressed state layer opacitymd.comp.slider.pressed.state-layer.opacity | 10% md.comp.slider.pressed.state-layer.opacity
|
Handle
| Token | Value |
|---|---|
Slider pressed handle colormd.comp.slider.pressed.handle.color | #6750A4 md.comp.slider.pressed.handle.color
|
Slider pressed handle widthmd.comp.slider.pressed.handle.width | 2dp md.comp.slider.pressed.handle.width |
Track
| Token | Value |
|---|---|
Slider pressed active track colormd.comp.slider.pressed.active.track.color | #6750A4 md.comp.slider.pressed.active.track.color
|
Slider pressed inactive track colormd.comp.slider.pressed.inactive.track.color | #E8DEF8 md.comp.slider.pressed.inactive.track.color
|
[Deprecated] Stop
| Token | Value |
|---|---|
Slider pressed stop colormd.comp.slider.pressed.stop.color | #6750A4 md.comp.slider.pressed.stop.color
|
Value indicator
| Token | Value |
|---|---|
Slider value indicator active bottom spacemd.comp.slider.value-indicator.active.bottom-space | 12dp md.comp.slider.value-indicator.active.bottom-space
|
Slider value indicator container colormd.comp.slider.value-indicator.container.color | #322F35 md.comp.slider.value-indicator.container.color
|
Slider value indicator label font colormd.comp.slider.value-indicator.label.label-text.color | #F5EFF7 md.comp.slider.value-indicator.label.label-text.color
|
Slider value indicator label fontmd.comp.slider.value-indicator.label.label-text.font | Roboto md.comp.slider.value-indicator.label.label-text.font
|
Slider value indicator label line heightmd.comp.slider.value-indicator.label.label-text.line-height | 20pt md.comp.slider.value-indicator.label.label-text.line-height
|
Slider value indicator label sizemd.comp.slider.value-indicator.label.label-text.size | 14pt md.comp.slider.value-indicator.label.label-text.size
|
Slider value indicator label trackingmd.comp.slider.value-indicator.label.label-text.tracking | 0.5pt md.comp.slider.value-indicator.label.label-text.tracking
|
Slider value indicator label weightmd.comp.slider.value-indicator.label.label-text.weight | 400 md.comp.slider.value-indicator.label.label-text.weight
|