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.

Enabled
Enabled tokens
TokenValue
Slider handle colormd.comp.slider.handle.color
md.sys.color.primaryShow reference chainHide reference chain
md.comp.slider.handle.color
  • md.sys.color.primary
    • md.ref.palette.primary40
#6750A4
Slider handle elevationmd.comp.slider.handle.elevation
md.sys.elevation.level1Show reference chainHide reference chain
md.comp.slider.handle.elevation
  • md.sys.elevation.level1
1dp
Slider handle shadow colormd.comp.slider.handle.shadow-color
md.sys.color.shadowShow reference chainHide reference chain
md.comp.slider.handle.shadow-color
  • md.sys.color.shadow
    • md.ref.palette.neutral0
#000000
Slider label container colormd.comp.slider.label.container.color
md.sys.color.primaryShow reference chainHide reference chain
md.comp.slider.label.container.color
  • md.sys.color.primary
    • md.ref.palette.primary40
#6750A4
Slider label container elevationmd.comp.slider.label.container.elevation
md.sys.elevation.level0Show reference chainHide reference chain
md.comp.slider.label.container.elevation
  • md.sys.elevation.level0
No value specified (dp)
Slider label label text colormd.comp.slider.label.label-text.color
md.sys.color.inverse-on-surfaceShow reference chainHide reference chain
md.comp.slider.label.label-text.color
  • md.sys.color.inverse-on-surface
    • md.ref.palette.neutral95
#F5EFF7
Slider track elevationmd.comp.slider.track.elevation
md.sys.elevation.level0Show reference chainHide reference chain
md.comp.slider.track.elevation
  • md.sys.elevation.level0
No value specified (dp)
Disabled
Disabled tokens
TokenValue
Slider disabled active stop indicator container colormd.comp.slider.disabled.active.stop-indicator.container.color
md.sys.color.inverse-on-surfaceShow reference chainHide reference chain
md.comp.slider.disabled.active.stop-indicator.container.color
  • md.sys.color.inverse-on-surface
    • md.ref.palette.neutral95
#F5EFF7
Slider disabled active track colormd.comp.slider.disabled.active.track.color
md.sys.color.on-surfaceShow reference chainHide reference chain
md.comp.slider.disabled.active.track.color
  • md.sys.color.on-surface
    • md.ref.palette.neutral10
#1D1B20
Slider disabled active track opacitymd.comp.slider.disabled.active.track.opacity38%
Slider disabled handle colormd.comp.slider.disabled.handle.color
md.sys.color.on-surfaceShow reference chainHide reference chain
md.comp.slider.disabled.handle.color
  • md.sys.color.on-surface
    • md.ref.palette.neutral10
#1D1B20
Slider disabled handle elevationmd.comp.slider.disabled.handle.elevation
md.sys.elevation.level0Show reference chainHide reference chain
md.comp.slider.disabled.handle.elevation
  • md.sys.elevation.level0
No value specified (dp)
Slider disabled handle opacitymd.comp.slider.disabled.handle.opacity38%
Slider disabled inactive stop indicator container colormd.comp.slider.disabled.inactive.stop-indicator.container.color
md.sys.color.on-surfaceShow reference chainHide reference chain
md.comp.slider.disabled.inactive.stop-indicator.container.color
  • md.sys.color.on-surface
    • md.ref.palette.neutral10
#1D1B20
Slider disabled inactive track colormd.comp.slider.disabled.inactive.track.color
md.sys.color.on-surfaceShow reference chainHide reference chain
md.comp.slider.disabled.inactive.track.color
  • md.sys.color.on-surface
    • md.ref.palette.neutral10
#1D1B20
Slider disabled inactive track opacitymd.comp.slider.disabled.inactive.track.opacity12%
Slider disabled stop color inactive trackmd.comp.slider.disabled.stop-indicator.color
md.sys.color.on-surfaceShow reference chainHide reference chain
md.comp.slider.disabled.stop-indicator.color
  • md.sys.color.on-surface
    • md.ref.palette.neutral10
#1D1B20
Slider disabled stop color active trackmd.comp.slider.disabled.stop-indicator.color-selected
md.sys.color.inverse-on-surfaceShow reference chainHide reference chain
md.comp.slider.disabled.stop-indicator.color-selected
  • md.sys.color.inverse-on-surface
    • md.ref.palette.neutral95
#F5EFF7
Slider disabled stop indicator container colormd.comp.slider.disabled.stop-indicator.container.color
md.sys.color.on-surfaceShow reference chainHide reference chain
md.comp.slider.disabled.stop-indicator.container.color
  • md.sys.color.on-surface
    • md.ref.palette.neutral10
#1D1B20
Slider disabled stop indicator container opacitymd.comp.slider.disabled.stop-indicator.container.opacity38%
Hovered
Hovered tokens
TokenValue
Slider hover handle colormd.comp.slider.hover.handle.color
md.sys.color.primaryShow reference chainHide reference chain
md.comp.slider.hover.handle.color
  • md.sys.color.primary
    • md.ref.palette.primary40
#6750A4
Slider hover state layer colormd.comp.slider.hover.state-layer.color
md.sys.color.primaryShow reference chainHide reference chain
md.comp.slider.hover.state-layer.color
  • md.sys.color.primary
    • md.ref.palette.primary40
#6750A4
Slider hover state layer opacitymd.comp.slider.hover.state-layer.opacity
md.sys.state.hover.state-layer-opacityShow reference chainHide reference chain
md.comp.slider.hover.state-layer.opacity
  • md.sys.state.hover.state-layer-opacity
8%
Slider hover stop colormd.comp.slider.hover.stop.color
md.sys.color.primaryShow reference chainHide reference chain
md.comp.slider.hover.stop.color
  • md.sys.color.primary
    • md.ref.palette.primary40
#6750A4
Focused
Focused tokens
TokenValue
Slider focus active track colormd.comp.slider.focus.active.track.color
md.sys.color.primaryShow reference chainHide reference chain
md.comp.slider.focus.active.track.color
  • md.sys.color.primary
    • md.ref.palette.primary40
#6750A4
Slider focus handle colormd.comp.slider.focus.handle.color
md.sys.color.primaryShow reference chainHide reference chain
md.comp.slider.focus.handle.color
  • md.sys.color.primary
    • md.ref.palette.primary40
#6750A4
Slider focus inactive track colormd.comp.slider.focus.inactive.track.color
md.sys.color.secondary-containerShow reference chainHide reference chain
md.comp.slider.focus.inactive.track.color
  • md.sys.color.secondary-container
    • md.ref.palette.secondary90
#E8DEF8
Slider focus state layer colormd.comp.slider.focus.state-layer.color
md.sys.color.primaryShow reference chainHide reference chain
md.comp.slider.focus.state-layer.color
  • md.sys.color.primary
    • md.ref.palette.primary40
#6750A4
Slider focus state layer opacitymd.comp.slider.focus.state-layer.opacity
md.sys.state.focus.state-layer-opacityShow reference chainHide reference chain
md.comp.slider.focus.state-layer.opacity
  • md.sys.state.focus.state-layer-opacity
10%
Slider focus stop colormd.comp.slider.focus.stop.color
md.sys.color.primaryShow reference chainHide reference chain
md.comp.slider.focus.stop.color
  • md.sys.color.primary
    • md.ref.palette.primary40
#6750A4
Pressed
Pressed tokens
TokenValue
Slider pressed active track colormd.comp.slider.pressed.active.track.color
md.sys.color.primaryShow reference chainHide reference chain
md.comp.slider.pressed.active.track.color
  • md.sys.color.primary
    • md.ref.palette.primary40
#6750A4
Slider pressed handle colormd.comp.slider.pressed.handle.color
md.sys.color.primaryShow reference chainHide reference chain
md.comp.slider.pressed.handle.color
  • md.sys.color.primary
    • md.ref.palette.primary40
#6750A4
Slider pressed inactive track colormd.comp.slider.pressed.inactive.track.color
md.sys.color.secondary-containerShow reference chainHide reference chain
md.comp.slider.pressed.inactive.track.color
  • md.sys.color.secondary-container
    • md.ref.palette.secondary90
#E8DEF8
Slider pressed state layer colormd.comp.slider.pressed.state-layer.color
md.sys.color.primaryShow reference chainHide reference chain
md.comp.slider.pressed.state-layer.color
  • md.sys.color.primary
    • md.ref.palette.primary40
#6750A4
Slider pressed state layer opacitymd.comp.slider.pressed.state-layer.opacity
md.sys.state.pressed.state-layer-opacityShow reference chainHide reference chain
md.comp.slider.pressed.state-layer.opacity
  • md.sys.state.pressed.state-layer-opacity
10%
Slider pressed stop colormd.comp.slider.pressed.stop.color
md.sys.color.primaryShow reference chainHide reference chain
md.comp.slider.pressed.stop.color
  • md.sys.color.primary
    • md.ref.palette.primary40
#6750A4