API reference for Angular Material slider

import {MatSliderModule} from '@angular/material/slider';

Allows users to select from a range of values by moving the slider thumb. It is similar in behavior to the native <input type="range"> element.

Selector: mat-slider

Exported as: matSlider
Properties
Name Description
@Input()

color: ThemePalette

Theme color of the slider. This API is supported in M2 themes only, it has no effect in M3 themes. For color customization in M3, see https://material.angular.dev/components/slider/styling.

For information on applying color variants in M3, see https://material.angular.dev/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
@Input({ transform: booleanAttribute })

disableRipple: boolean

Whether ripples are disabled in the slider.
@Input({ transform: booleanAttribute })

disabled: boolean

Whether the slider is disabled.
@Input({ transform: booleanAttribute })

discrete: boolean

Whether the slider displays a numeric value label upon pressing the thumb.
@Input()

displayWith: (value: number) => string

Function that will be used to format the value before it is displayed in the thumb label. Can be used to format very large number in order for them to fit into the slider thumb.
@Input({ transform: numberAttribute })

max: number

The maximum value that the slider can have.
@Input({ transform: numberAttribute })

min: number

The minimum value that the slider can have.
@Input({ transform: booleanAttribute })

showTickMarks: boolean

Whether the slider displays tick marks along the slider track.
@Input({ transform: numberAttribute })

step: number

The values at which the thumb will snap.

Directive that adds slider-specific behaviors to an input element inside <mat-slider>. Up to two may be placed inside of a <mat-slider>.

If one is used, the selector matSliderThumb must be used, and the outcome will be a normal slider. If two are used, the selectors matSliderStartThumb and matSliderEndThumb must be used, and the outcome will be a range slider with two slider thumbs.

Selector: input[matSliderThumb]

Exported as: matSliderThumb
Properties
Name Description
@Input({ transform: numberAttribute })

value: number

@Output()

dragEnd: EventEmitter<MatSliderDragEvent>

Event emitted when the slider thumb stops being dragged.
@Output()

dragStart: EventEmitter<MatSliderDragEvent>

Event emitted when the slider thumb starts being dragged.
@Output()

valueChange: EventEmitter<number>

Event emitted when the value is changed.

percentage: number

The percentage of the slider that coincides with the value.

step: number

Methods
blur
focus

Selector: input[matSliderStartThumb] input[matSliderEndThumb]

Exported as: matSliderRangeThumb
Properties
Name Description
@Input({ transform: numberAttribute })

value: number

@Output()

dragEnd: EventEmitter<MatSliderDragEvent>

Event emitted when the slider thumb stops being dragged.
@Output()

dragStart: EventEmitter<MatSliderDragEvent>

Event emitted when the slider thumb starts being dragged.
@Output()

valueChange: EventEmitter<number>

Event emitted when the value is changed.

percentage: number

The percentage of the slider that coincides with the value.

step: number

Methods
blur
focus

A simple change event emitted by the MatSlider component.

Deprecated
Properties
Name Description

parent: _MatSlider

The MatSlider that was interacted with.

source: _MatSliderThumb

The MatSliderThumb that was interacted with.

value: number

The new value of the source slider.

Represents a drag event emitted by the MatSlider component.

Properties
Name Description

parent: _MatSlider

The MatSlider that was interacted with.

source: _MatSliderThumb

The MatSliderThumb that was interacted with.

value: number

The current value of the slider.