material使用demo----添加滑块

按照官方文档实践
https://material.angular.io/guide/getting-started
安装，在angular工程目录下执行

ng add @angular/material
ℹ Using package manager: npm
✔ Found compatible package version: @angular/material@13.3.9.
✔ Package information loaded.

The package @angular/material@13.3.9 will be installed and executed.
Would you like to proceed? Yes
✔ Package successfully installed.
? Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink        [ Preview: https://material.angular.io?theme=indigo-pink ]
? Set up global Angular Material typography styles? No
? Set up browser animations for Angular Material? Yes
UPDATE package.json (1150 bytes)
✔ Packages installed successfully.
UPDATE src/app/app.module.ts (1313 bytes)
UPDATE angular.json (3293 bytes)
UPDATE src/index.html (564 bytes)
UPDATE src/styles.css (181 bytes)

导入，改app.module.ts

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

@NgModule ({
  imports: [
    MatSliderModule,
  ]
})
class AppModule {}

在html页面显示

<mat-slider min="1" max="100" step="1" value="50"></mat-slider>

滑块效果

滑块只有2个状态
https://material.angular.io/components/slide-toggle/overview

//app.module.ts
import { MatSlideToggleModule } from '@angular/material/slide-toggle'; 
...
 imports: [
 	...
    MatSliderModule,
    MatSlideToggleModule,  
  ]

app.component.html

<mat-slide-toggle>Slide me!</mat-slide-toggle> 

效果