API reference for Angular Material slider
import {MatSliderModule} from '@angular/material/slider';
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 palette for the component. |
@Input()
|
Whether the component is disabled. |
@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()
|
Whether the slider is inverted. |
@Input()
|
The maximum value that the slider can have. |
@Input()
|
The minimum value that the slider can have. |
@Input()
|
The values at which the thumb will snap. |
@Input()
|
Whether or not to show the thumb label. |
@Input()
|
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 of the slider. |
@Input()
|
Whether the slider is vertical. |
@Output()
|
Event emitted when the slider value has changed. |
@Output()
|
Event emitted when the slider thumb moves. |
|
Default color to fall back to if no value is set. |
|
Tabindex to which to fall back to if no value is set. |
|
The value to be used for display purposes. |
|
onTouch function registered via registerOnTouch (ControlValueAccessor). |
|
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
|
|
MatSliderChange
A simple change event emitted by the MatSlider component.
Properties
| Name | Description |
|---|---|
|
The MatSlider that changed. |
|
The new value of the source slider. |
API reference for Angular Material slider-testing
import {MatSliderHarness} from '@angular/material/slider/testing';
MatSliderHarness
extends
ComponentHarness
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 |
|
| 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. |
SliderHarnessFilters
A set of criteria that can be used to filter a list of MatSliderHarness instances.