Slider • Angular Material

Styles from the material/slider package can be customized using the slider-overrides mixin. This mixin accepts a set of tokens that control how the components will look, either for the entire app or under a specific selector. For example:

@use '@angular/material' as mat;

// Customize the entire app. Change :root to your selector if you want to scope the styles.
:root {
  @include mat.slider-overrides((
    active-track-color: orange,
    disabled-active-track-color: red,
  ));
}

You can find the full list of supported mixins and tokens below.

Tokens supported by `slider-overrides`

Filter by name

Filter by type

Filter by default value

Name	Type	Default value
`active-track-shape`	Base	--mat-sys-corner-full
`handle-shape`	Base	--mat-sys-corner-full
`inactive-track-shape`	Base	--mat-sys-corner-full
`with-tick-marks-container-shape`	Base	--mat-sys-corner-full
`value-indicator-opacity`	Base	1
`value-indicator-padding`	Base	0
`value-indicator-width`	Base	28px
`value-indicator-height`	Base	28px
`value-indicator-caret-display`	Base	none
`value-indicator-border-radius`	Base	50%,50%,50%,0
`value-indicator-text-transform`	Base	rotate(45deg)
`value-indicator-container-transform`	Base	translateX(-50%),rotate(-45deg)
`active-track-height`	Base	4px
`handle-height`	Base	20px
`handle-width`	Base	20px
`inactive-track-height`	Base	4px
`with-overlap-handle-outline-width`	Base	1px
`with-tick-marks-active-container-opacity`	Base	0.38
`with-tick-marks-container-size`	Base	2px
`with-tick-marks-inactive-container-opacity`	Base	0.38
`value-indicator-transform-origin`	Base	0,28px
`active-track-color`	Color	--mat-sys-primary
`disabled-active-track-color`	Color	--mat-sys-on-surface
`disabled-handle-color`	Color	--mat-sys-on-surface
`disabled-inactive-track-color`	Color	--mat-sys-on-surface
`focus-handle-color`	Color	--mat-sys-primary
`focus-state-layer-color`	Color	color-mix(in srgb, var(--mat-sys-primary) 20%, transparent)
`handle-color`	Color	--mat-sys-primary
`handle-elevation`	Color	--mat-sys-level1
`hover-handle-color`	Color	--mat-sys-primary
`hover-state-layer-color`	Color	color-mix(in srgb, var(--mat-sys-primary) 5%, transparent)
`inactive-track-color`	Color	--mat-sys-surface-variant
`label-container-color`	Color	--mat-sys-primary
`label-label-text-color`	Color	--mat-sys-on-primary
`ripple-color`	Color	--mat-sys-primary
`with-overlap-handle-outline-color`	Color	--mat-sys-on-primary
`with-tick-marks-active-container-color`	Color	--mat-sys-on-primary
`with-tick-marks-disabled-container-color`	Color	--mat-sys-on-surface
`with-tick-marks-inactive-container-color`	Color	--mat-sys-on-surface-variant
`label-label-text-font`	Typography	--mat-sys-label-medium-font
`label-label-text-line-height`	Typography	--mat-sys-label-medium-line-height
`label-label-text-size`	Typography	--mat-sys-label-medium-size
`label-label-text-tracking`	Typography	--mat-sys-label-medium-tracking
`label-label-text-weight`	Typography	--mat-sys-label-medium-weight

How to style slider

Tokens supported by slider-overrides

Tokens supported by `slider-overrides`