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 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.io/components/slider/styling.

For information on applying color variants in M3, see https://material.angular.io/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.

API reference for Angular Material slider-testing

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

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

Properties
Name Description

static hostSelector: '.mat-mdc-slider'

Methods
async
getEndThumb

Gets the thumb (for single point sliders), or the end thumb (for range sliders).

Returns
Promise<MatSliderThumbHarness>

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
getStartThumb

Gets the start thumb of the slider (only applicable for range sliders).

Returns
Promise<MatSliderThumbHarness>

async
getStep

Gets the value step increments 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

Gets whether the slider is disabled.

Returns
Promise<boolean>

async
isRange

Gets whether the slider is a range slider.

Returns
Promise<boolean>

static
with

Gets a HarnessPredicate that can be used to search for a slider with specific attributes.

Parameters

options

SliderHarnessFilters = {}

Options for filtering which input instances are considered a match.

Returns
HarnessPredicate<T>

a HarnessPredicate configured with the given options.

Harness for interacting with a thumb inside of a Material slider in tests.

Properties
Name Description

static hostSelector: 'input[matSliderThumb], input[matSliderStartThumb], input[matSliderEndThumb]'

Methods
async
blur

Blurs the thumb and returns a promise that indicates when the action is complete.

Returns
Promise<void>

Promise that resolves when the action completes.

async
focus

Focuses the thumb and returns a promise that indicates when the action is complete.

Returns
Promise<void>

Promise that resolves when the action completes.

async
getDisplayValue

Gets the text representation of the slider's value.

Returns
Promise<string>

async
getId

Gets the id of the thumb.

Returns
Promise<string>

async
getMaxValue

Gets the maximum value of the thumb.

Returns
Promise<number>

async
getMinValue

Gets the minimum value of the thumb.

Returns
Promise<number>

async
getName

Gets the name of the thumb.

Returns
Promise<string>

async
getPercentage

Gets the current percentage value of the slider.

Returns
Promise<number>

async
getPosition

Gets the position of the thumb inside the slider.

Returns
Promise<ThumbPosition>

async
getValue

Gets the value of the thumb.

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 thumb is disabled.

Returns
Promise<boolean>

async
isFocused

Whether the thumb is focused.

Returns
Promise<boolean>

async
setValue

Sets the value of the thumb.

Parameters

newValue

number

Returns
Promise<void>

Promise that resolves when the action completes.

static
with

Gets a HarnessPredicate that can be used to search for a slider thumb with specific attributes.

Parameters

options

SliderThumbHarnessFilters = {}

Options for filtering which thumb instances are considered a match.

Returns
HarnessPredicate<T>

a HarnessPredicate configured with the given options.

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

Properties
Name Description

disabled: boolean

Only find instances which match the given disabled state.

isRange: boolean

Filters out only range/non-range sliders.

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

Properties
Name Description

position: ThumbPosition

Filters out slider thumbs with a particular position.

Azure & Blue theme selected.