Slide Toggle • Angular Material

Styles from the material/slide-toggle package can be customized using the slide-toggle-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.slide-toggle-overrides((
    selected-track-outline-color: orange,
    disabled-label-text-color: red,
  ));
}

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

Tokens supported by `slide-toggle-overrides`

Filter by name

Filter by type

Filter by default value

Name	Type	Default value
`disabled-selected-handle-opacity`	Base	1
`disabled-selected-icon-opacity`	Base	0.38
`disabled-track-opacity`	Base	0.12
`disabled-unselected-handle-opacity`	Base	0.38
`disabled-unselected-icon-opacity`	Base	0.38
`disabled-unselected-track-outline-width`	Base	2px
`handle-shape`	Base	--mat-sys-corner-full
`hidden-track-opacity`	Base	0
`hidden-track-transition`	Base	opacity,75ms
`pressed-handle-size`	Base	28px
`selected-handle-horizontal-margin`	Base	0,24px
`selected-handle-size`	Base	24px
`selected-icon-size`	Base	16px
`selected-pressed-handle-horizontal-margin`	Base	0,22px
`selected-track-outline-width`	Base	2px
`selected-with-icon-handle-horizontal-margin`	Base	0,24px
`state-layer-size`	Base	40px
`track-height`	Base	32px
`track-outline-width`	Base	2px
`track-shape`	Base	--mat-sys-corner-full
`track-width`	Base	52px
`unselected-handle-horizontal-margin`	Base	0,8px
`unselected-handle-size`	Base	16px
`unselected-icon-size`	Base	16px
`unselected-pressed-handle-horizontal-margin`	Base	0,2px
`unselected-with-icon-handle-horizontal-margin`	Base	0,4px
`visible-track-opacity`	Base	1
`visible-track-transition`	Base	opacity,75ms
`with-icon-handle-size`	Base	24px
`handle-width`	Base
`handle-height`	Base
`touch-target-size`	Base	48px
`selected-track-outline-color`	Color	transparent
`disabled-label-text-color`	Color	--mat-sys-on-surface
`disabled-selected-handle-color`	Color	--mat-sys-surface
`disabled-selected-icon-color`	Color	--mat-sys-on-surface
`disabled-selected-track-color`	Color	--mat-sys-on-surface
`disabled-unselected-handle-color`	Color	--mat-sys-on-surface
`disabled-unselected-icon-color`	Color	--mat-sys-surface-variant
`disabled-unselected-track-color`	Color	--mat-sys-surface-variant
`disabled-unselected-track-outline-color`	Color	--mat-sys-on-surface
`label-text-color`	Color	--mat-sys-on-surface
`selected-focus-handle-color`	Color	--mat-sys-primary-container
`selected-focus-state-layer-color`	Color	--mat-sys-primary
`selected-focus-state-layer-opacity`	Color	--mat-sys-focus-state-layer-opacity
`selected-focus-track-color`	Color	--mat-sys-primary
`selected-handle-color`	Color	--mat-sys-on-primary
`selected-hover-handle-color`	Color	--mat-sys-primary-container
`selected-hover-state-layer-color`	Color	--mat-sys-primary
`selected-hover-state-layer-opacity`	Color	--mat-sys-hover-state-layer-opacity
`selected-hover-track-color`	Color	--mat-sys-primary
`selected-icon-color`	Color	--mat-sys-on-primary-container
`selected-pressed-handle-color`	Color	--mat-sys-primary-container
`selected-pressed-state-layer-color`	Color	--mat-sys-primary
`selected-pressed-state-layer-opacity`	Color	--mat-sys-pressed-state-layer-opacity
`selected-pressed-track-color`	Color	--mat-sys-primary
`selected-track-color`	Color	--mat-sys-primary
`track-outline-color`	Color	--mat-sys-outline
`unselected-focus-handle-color`	Color	--mat-sys-on-surface-variant
`unselected-focus-state-layer-color`	Color	--mat-sys-on-surface
`unselected-focus-state-layer-opacity`	Color	--mat-sys-focus-state-layer-opacity
`unselected-focus-track-color`	Color	--mat-sys-surface-variant
`unselected-handle-color`	Color	--mat-sys-outline
`unselected-hover-handle-color`	Color	--mat-sys-on-surface-variant
`unselected-hover-state-layer-color`	Color	--mat-sys-on-surface
`unselected-hover-state-layer-opacity`	Color	--mat-sys-hover-state-layer-opacity
`unselected-hover-track-color`	Color	--mat-sys-surface-variant
`unselected-icon-color`	Color	--mat-sys-surface-variant
`unselected-pressed-handle-color`	Color	--mat-sys-on-surface-variant
`unselected-pressed-state-layer-color`	Color	--mat-sys-on-surface
`unselected-pressed-state-layer-opacity`	Color	--mat-sys-pressed-state-layer-opacity
`unselected-pressed-track-color`	Color	--mat-sys-surface-variant
`unselected-track-color`	Color	--mat-sys-surface-variant
`handle-surface-color`	Color
`handle-elevation-shadow`	Color
`disabled-handle-elevation-shadow`	Color
`label-text-font`	Typography	--mat-sys-body-medium-font
`label-text-line-height`	Typography	--mat-sys-body-medium-line-height
`label-text-size`	Typography	--mat-sys-body-medium-size
`label-text-tracking`	Typography	--mat-sys-body-medium-tracking
`label-text-weight`	Typography	--mat-sys-body-medium-weight
`touch-target-display`	Density	block

How to style slide-toggle

Tokens supported by slide-toggle-overrides

Tokens supported by `slide-toggle-overrides`