API reference for Angular Material slider
import {MatSliderModule} from '@angular/material/slider';
Directives
MatSlider
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: matSliderProperties
Name | Description |
---|---|
@Input()
|
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 })
|
Whether ripples are disabled in the slider. |
@Input({ transform: booleanAttribute })
|
Whether the slider is disabled. |
@Input({ transform: booleanAttribute })
|
Whether the slider displays a numeric value label upon pressing the thumb. |
@Input()
|
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 })
|
The maximum value that the slider can have. |
@Input({ transform: numberAttribute })
|
The minimum value that the slider can have. |
@Input({ transform: booleanAttribute })
|
Whether the slider displays tick marks along the slider track. |
@Input({ transform: numberAttribute })
|
The values at which the thumb will snap. |
MatSliderThumb
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: matSliderThumbProperties
Name | Description |
---|---|
@Input({ transform: numberAttribute })
|
|
@Output()
|
Event emitted when the slider thumb stops being dragged. |
@Output()
|
Event emitted when the slider thumb starts being dragged. |
@Output()
|
Event emitted when the |
|
The percentage of the slider that coincides with the value. |
|
Methods
blur |
---|
focus |
---|
MatSliderRangeThumb
extends
MatSliderThumb
Selector: input[matSliderStartThumb] input[matSliderEndThumb]
Exported as: matSliderRangeThumbProperties
Name | Description |
---|---|
@Input({ transform: numberAttribute })
|
|
@Output()
|
Event emitted when the slider thumb stops being dragged. |
@Output()
|
Event emitted when the slider thumb starts being dragged. |
@Output()
|
Event emitted when the |
|
The percentage of the slider that coincides with the value. |
|
Methods
blur |
---|
focus |
---|
Classes
MatSliderChange
A simple change event emitted by the MatSlider component.
Properties
Name | Description |
---|---|
|
The MatSlider that was interacted with. |
|
The MatSliderThumb that was interacted with. |
|
The new value of the source slider. |
Interfaces
MatSliderDragEvent
Represents a drag event emitted by the MatSlider component.
Properties
Name | Description |
---|---|
|
The MatSlider that was interacted with. |
|
The MatSliderThumb that was interacted with. |
|
The current value of the slider. |
API reference for Angular Material slider-testing
import {MatSliderHarness} from '@angular/material/slider/testing';
Classes
MatSliderHarness
extends
ComponentHarness
Harness for interacting with a MDC mat-slider in tests.
Properties
Name | Description |
---|---|
|
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 |
|
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 |
|
Parameters | |
options SliderHarnessFilters = {}
|
Options for filtering which input instances are considered a match. |
Returns | |
HarnessPredicate<T>
|
a |
MatSliderThumbHarness
extends
ComponentHarness
Harness for interacting with a thumb inside of a Material slider in tests.
Properties
Name | Description |
---|---|
|
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 |
|
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 |
|
Parameters | |
options SliderThumbHarnessFilters = {}
|
Options for filtering which thumb instances are considered a match. |
Returns | |
HarnessPredicate<T>
|
a |
Interfaces
SliderHarnessFilters
A set of criteria that can be used to filter a list of MatSliderHarness
instances.
Properties
Name | Description |
---|---|
|
Only find instances which match the given disabled state. |
|
Filters out only range/non-range sliders. |
SliderThumbHarnessFilters
A set of criteria that can be used to filter a list of MatSliderThumbHarness
instances.
Properties
Name | Description |
---|---|
|
Filters out slider thumbs with a particular position. |