滑杆 Slider

slider 的 API

Angular Material slider API 参考文档

import {MatSliderModule} from '@angular/material/slider';

允许用户通过移动滑杆来从一系列值中进行选择。它的行为类似于原生的 <input type="range"> 元素。

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.

选择器: mat-slider
导出为: matSlider
属性
名称 描述
@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"

多远才显示一个刻度。相对于步长来说,刻度总是会出现在一个步长上。例如:刻度的间隔为 4,步长为 3,则每 4 步(每 12 个值)就会画一个刻度。

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()

valueText: string

对应滑杆值的文本。主要用于改善无障碍性。

Text corresponding to the slider's value. Used primarily for improved accessibility.

@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。

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

通过 ControlValueAccessor 上的 registerOnTouch 注册的 onTouch 函数。

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

参数

Parameters

options?

FocusOptions

MatSlider 组件发出的一个简单的 change 事件。

A simple change event emitted by the MatSlider component.

属性
名称 描述

source: MatSlider

发生改变的 MatSlider。

The MatSlider that changed.

value: number | null

源滑杆的新值。

The new value of the source slider.

Angular Material slider-testing API 参考文档

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

在测试中用来与标准 mat-slider 进行交互的测试工具。

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

方法
异步
blur

让此滑块失焦。

Blurs the slider.

返回值

Returns

Promise<void>

当此动作完成时解析的 Promise。

异步
focus

让此滑块获得焦点。

Focuses the slider.

返回值

Returns

Promise<void>

当此动作完成时解析的 Promise。

异步
getDisplayValue

获取滑块的当前显示值。如果禁用了指示标签,则返回一个空的 Promise。

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

返回值

Returns

Promise<string | null>
异步
getId

获取滑块的 ID。

Gets the slider's id.

返回值

Returns

Promise<string | null>
异步
getMaxValue

获取此滑块的最大值。

Gets the maximum value of the slider.

返回值

Returns

Promise<number>
异步
getMinValue

获取此滑块的最小值。

Gets the minimum value of the slider.

返回值

Returns

Promise<number>
异步
getOrientation

获取此滑块的方向。

Gets the orientation of the slider.

返回值

Returns

Promise<'horizontal' | 'vertical'>
异步
getPercentage

获取此滑块的当前百分比值。

Gets the current percentage value of the slider.

返回值

Returns

Promise<number>
异步
getValue

获取此滑块的当前值。

Gets the current value of the slider.

返回值

Returns

Promise<number>
异步
host

获取一个代表该组件宿主元素的 TestElementPromise

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

返回值

Returns

Promise<TestElement>
异步
isDisabled

此滑块是否已禁用。

Whether the slider is disabled.

返回值

Returns

Promise<boolean>
异步
isFocused

此滑块是否拥有焦点。

Whether the slider is focused.

返回值

Returns

Promise<boolean>
异步
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。

一组可用于过滤 MatSliderHarness 实例列表的条件。

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