Angular Material中的mat-slider介绍

Angular Material是一个UI组件库，由Angular团队开发，用于构建桌面和移动Web应用程序的设计组件。为了安装它，我们需要在我们的项目中安装Angular，一旦你有了它，你可以输入下面的命令，就可以下载它了。

安装:

ng add @angular/material

步骤:

首先，使用上述命令安装Angular Material。
完成安装后，在app.module.ts文件中从’@angular/material/slider’导入’MatSliderModule’。
然后使用mat-slider标签来显示滑块。
它们有许多特性，可以帮助我们在不同的情况下使用它。
下表解释了一些重要的特性。
如果我们想改变主题，我们可以通过使用颜色属性来改变它。在angular中，我们有3个主题，它们是主要的、重点的和警告的。
默认情况下，重音主题已经设定。
一旦完成了上述步骤，就可以服务或开始项目。

属性名称	意义
invert	为了以倒置的方向显示滑块。
vertical	为了在垂直方向上显示滑块。
disabled	为了禁用滑块

代码实现:

app.module.ts:

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { FormsModule } from '@angular/forms'; 
      
import { AppComponent } from './app.component'; 
import { MatSliderModule } from '@angular/material/slider'; 
  
@NgModule({ 
  imports: 
  [ BrowserModule, 
    FormsModule, 
    MatSliderModule], 
  declarations: [ AppComponent ], 
  bootstrap: [ AppComponent ] 
}) 
export class AppModule { }

app.component.html:

<p>Default Accent Theme Slider</p>
<mat-slider>
<hr>
  
<p>Primary Theme Slider</p>
<mat-slider color="primary">
<hr>
  
<p>Warn Theme Slider</p>
<mat-slider color="warn">
<hr>
  
<p>Inverted Slider</p>
<mat-slider invert="true">
<hr>
  
<p>Vertical Slider</p>
<mat-slider vertical="true">
<hr>
  
<p>Disabled Slider</p>
<mat-slider disabled="true">
<hr>