angular-material-app documentation
  1. Components
  2. SliderComponent

File

src/app/materials/slider/slider.component.ts

Implements

OnInit

Metadata

selector app-slider
styleUrls ./slider.component.scss
templateUrl ./slider.component.html

Index

Methods

Constructor

constructor()
Defined in src/app/materials/slider/slider.component.ts:8

Methods

formatLabel
formatLabel(value: number | null)
Defined in src/app/materials/slider/slider.component.ts:13
Parameters :
Name Type Optional
value number | null No
Returns : string | number
ngOnInit
ngOnInit()
Defined in src/app/materials/slider/slider.component.ts:11
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;
  }
}
Copy
<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>
Copy

./slider.component.scss 

mat-card {
  margin: 24px;
}
Copy
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""