Slider

API for 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
Properties
Name Description
@Input()

color: ThemePalette

Theme color palette for the component.

@Input()

disabled: boolean

Whether the component is disabled.

@Input()

displayWith: (value: number) => 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.

defaultColor: ThemePalette | undefined

Default color to fall back to if no value is set.

defaultTabIndex: number

Tabindex to which to fall back to if no value is set.

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.

Methods
blur

blur the host element

focus

set focus to the host element

Parameters

options?

FocusOptions

A simple change event emitted by the MatSlider component.

Properties
Name Description

source: MatSlider

The MatSlider that changed.

value: number | null

The new value of the source slider.

API reference for Angular Material slider-testing

import {MatSliderHarness} from '@angular/material/slider/testing';

Harness for interacting with a standard mat-slider in tests.

Methods
async
blur

Blurs the slider.

Returns
Promise<void>

Promise that resolves when the action completes.

async
focus

Focuses the slider.

Returns
Promise<void>

Promise that resolves when the action completes.

async
getDisplayValue

Gets the current display value of the slider. Returns a null promise if the thumb label is disabled.

Returns
Promise<string | null>

async
getId

Gets the slider's id.

Returns
Promise<string | null>

async
getMaxValue

Gets the maximum value of the slider.

Returns
Promise<number>

async
getMinValue

Gets the minimum value of the slider.

Returns
Promise<number>

async
getOrientation

Gets the orientation of the slider.

Returns
Promise<'horizontal' | 'vertical'>

async
getPercentage

Gets the current percentage value of the slider.

Returns
Promise<number>

async
getValue

Gets the current value of the slider.

Returns
Promise<number>

async
host

Gets a Promise for the TestElement representing the host element of the component.

Returns
Promise<TestElement>

async
isDisabled

Whether the slider is disabled.

Returns
Promise<boolean>

async
isFocused

Whether the slider is focused.

Returns
Promise<boolean>

async
setValue

Sets the value of the slider by clicking on the slider track.

Note that in rare cases the value cannot be set to the exact specified value. This can happen if not every value of the slider maps to a single pixel that could be clicked using mouse interaction. In such cases consider using the keyboard to select the given value or expand the slider's size for a better user experience.

Parameters

value

number

Returns
Promise<void>

Promise that resolves when the action completes.

A set of criteria that can be used to filter a list of MatSliderHarness instances.