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() `displayWith: (value: number \| null) => string \| number`	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() `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: number \| "auto"`	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.