Angular Material Slider

<mat-slider> 是一个 Angular 指令，用作具有 material 样式和动画功能的增强型范围选择器。 <mat-slider> 允许通过鼠标、触摸或键盘从某个范围内选择一个值，它类似于<input type="range">。 当需要在项目中用到滑块时，可以使用 <mat-slider> 标签。

基本滑块

选择一个值

默认情况下，滑块的最小值为0，最大值为100，拇指的移动增量为1。

导向

滑块的方向是水平的，最小值在左边，最大值在右边。 vertical 属性添加到滑块，使其垂直，最小值和最大值在顶部。

还有一个反向功能，用于翻转随拇指移动的轴。在反向垂直滑块中，最小值在顶部，最大值在底部。

Thumb label（拇指标签）

滑块的选定值对用户不可见。但将值添加到 Thumb Lab 属性将链接到拇指。

Material Design Spec 仅将 Thumb lab 属性（带 tickInterval = "1"）用于滑块，以显示离散值。

格式化拇指标签

拇指标签中的值与模型的值相同。它很大，以适合末端的标签。如果要控制显示的值，请使用DisplayWith输入。

带有自定义拇指标签格式的滑块

滑块不在拇指轨道上显示刻度线。通过使用刻度间隔属性启用它。刻度间隔的值表示刻度之间的步数。

TickInterval 选择许多步长，以便在刻度之间有30px的空间。

滑块在轨道的开头和结尾显示一个刻度。

键盘交互

它具有以下键盘绑定

示例

app.module.ts

app.component.html

app.component.css

app.component.ts

输出

说明

我们使用 mat-checkbox 创建了四个复选框，并将它们与 NgModel 和变量绑定。它用于自定义滑块。

然后，我们创建了滑块，并在 .ts 文件中展示了它的属性和变量。