src/app/materials/slider/slider.component.ts
| selector | app-slider |
| styleUrls | ./slider.component.scss |
| templateUrl | ./slider.component.html |
Methods |
constructor()
|
| formatLabel | ||||||
formatLabel(value: number | null)
|
||||||
|
Parameters :
Returns :
string | number
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-slider',
templateUrl: './slider.component.html',
styleUrls: ['./slider.component.scss']
})
export class SliderComponent implements OnInit {
constructor() {}
ngOnInit() {}
formatLabel(value: number | null) {
if (!value) {
return 0;
}
if (value >= 1000) {
return Math.round(value / 1000) + 'k';
}
return value;
}
}
<mat-card>
<mat-card-title> Basic slider </mat-card-title>
<mat-card-content>
<mat-slider></mat-slider>
</mat-card-content>
</mat-card>
<mat-card>
<mat-card-title>Selecting a value</mat-card-title>
<mat-card-content>
<mat-slider min="1" max="10" step="0.5" value="1.5"></mat-slider>
</mat-card-content>
</mat-card>
<mat-card>
<mat-card-title> Orientation slider </mat-card-title>
<mat-card-content>
<mat-slider vertical></mat-slider>
<mat-slider invert></mat-slider>
</mat-card-content>
</mat-card>
<mat-card>
<mat-card-title> Thumb label slider </mat-card-title>
<mat-card-content>
<mat-slider thumbLabel tickInterval="1"></mat-slider>
</mat-card-content>
</mat-card>
<mat-card>
<mat-card-title> Formatting the thumb label slider </mat-card-title>
<mat-card-content>
<mat-slider thumbLabel [displayWith]="formatLabel" tickInterval="1000" min="1" max="100000"></mat-slider>
</mat-card-content>
</mat-card>
./slider.component.scss
mat-card {
margin: 24px;
}