Slider

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

Name	Description
@Input() `color: ThemePalette`	Theme color palette for the component.
@Input() `disabled: boolean`	Whether the component is disabled.
@Input() `invert: boolean`	Whether the slider is inverted.
@Input() `max: number`	The maximum value that the slider can have.
@Input() `min: number`	The minimum value that the slider can have.
@Input() `step: number`	The values at which the thumb will snap.
@Input() `thumbLabel: boolean`	Whether or not to show the thumb label.
@Input() `tickInterval: 'auto' \| number`	How often to show ticks. Relative to the step so that a tick always appears on a step. Ex: Tick interval of 4 with a step of 3 will draw a tick every 4 steps (every 12 values).
@Input() `value: number \| null`	Value of the slider.
@Input() `vertical: boolean`	Whether the slider is vertical.
@Output() `change: EventEmitter<MatSliderChange>`	Event emitted when the slider value has changed.
@Output() `input: EventEmitter<MatSliderChange>`	Event emitted when the slider thumb moves.
`displayValue: string \| number`	The value to be used for display purposes.
`onTouched: () => any`	onTouch function registered via registerOnTouch (ControlValueAccessor).
`percent: number`	The percentage of the slider that coincides with the value.

blur
blur the host element

focus
set focus to the host element

A simple change event emitted by the MatSlider component.

Name	Description
`source: MatSlider`	The MatSlider that changed.
`value: number \| null`	The new value of the source slider.

Contents