Angular Material Slider
March 13, 2021
Angular Material MatSlider
directive creates slider that is used to select from a range of values by moving the slider thumb. The selector for MatSlider
is mat-slider
. The properties of mat-slider
are 'value', 'valueText', 'vertical', 'color', 'disabled', 'displayWith', 'invert', 'max', 'min', 'step', 'thumbLabel' and 'tickInterval'. The events of mat-slider
are 'change' and 'input'. The value for color
property is 'primary', 'accent' and 'warn'.
To use
MatSlider
in our application, we need to import below module.
import { MatSliderModule } from '@angular/material/slider';
Contents
Technologies Used
Find the technologies being used in our example.1. Angular 11.0.3
2. Angular Material 11.2.0
3. Node.js 12.5.0
4. NPM 6.9.0
min
, max
, step
and value
value: Value of the slider.
min: Minimum value for slider. Default is 0.
max: Maximum value for slider. Default is 100.
step: The values at which the thumb will snap. Default is 1. It means the thumb moves in increments of 1 by default.
For example, find the initial value of slider.
valA=5;
<mat-slider min="1" max="10" step="0.5" [(value)]="valA"></mat-slider>
valA
changes between 1 and 10 numbers by step 0.5.
vertical
and invert
1. vertical: Boolean value. If the value is true, the slider will be vertical. If this attribute is absent, the default value is false.
<mat-slider min="1" max="10" step="0.5" vertical></mat-slider>
<mat-slider min="1" max="10" step="0.5" invert></mat-slider>
thumbLabel
The thumbLabel
is boolean value. If the value is true, thumb label is shown. If this attribute is absent, the default value is false.
<mat-slider thumbLabel step="2" min="1" max="100"> </mat-slider>
displayWith
The displayWith
is a function that is used to format display text of thumb label.
Find the sample example.
<mat-slider thumbLabel [displayWith]="formatThumbLabel" min="1" max="20000"> </mat-slider>
formatThumbLabel
in component.
formatThumbLabel(value: number) { if (value >= 1000) { return Math.round(value / 1000) + 'k'; } return value; }
tickInterval
The tickInterval
is relative to the step
. Find the sample example.
<mat-slider step="2" tickInterval="5" min="1" max="30"></mat-slider>
Keyboard Bindings
Right arrow: Increment the slider value by one step.Up arrow: Increment the slider value by one step.
Left arrow: Decrement the slider value by one step.
Down arrow: Decrement the slider value by one step.
Page up: Increment the slider value by 10 steps.
Page down: Decrement the slider value by 10 steps.
End: Set the value to maximum.
Home: Set the value to minimum.
Complete Example
app.component.html<h3>min, max, step and value</h3> <mat-slider min="1" max="10" step="0.5" [(value)]="valA"></mat-slider> {{valA}} <h3>vertical and invert</h3> <mat-slider min="1" max="10" step="0.5" vertical></mat-slider> <mat-slider min="1" max="10" step="0.5" invert></mat-slider> <h3>thumbLabel</h3> <mat-slider thumbLabel step="2" min="1" max="100"> </mat-slider> <h3>displayWith</h3> <mat-slider thumbLabel [displayWith]="formatThumbLabel" min="1" max="20000"> </mat-slider> <h3>tickInterval</h3> <mat-slider step="2" tickInterval="5" min="1" max="30"></mat-slider> <mat-slider step="2" min="1" max="30" tickInterval="auto"></mat-slider>
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html' }) export class AppComponent implements OnInit { ngOnInit() { } valA=5; formatThumbLabel(value: number) { if (value >= 1000) { return Math.round(value / 1000) + 'k'; } return value; } }
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { MatSliderModule } from '@angular/material/slider'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule, MatSliderModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
Run Application
To run the application, find the steps.1. Install Angular CLI using link.
2. Install Angular Material using link.
3. Download source code using download link given below on this page.
4. Use downloaded src in your Angular CLI application.
5. Run ng serve using command prompt.
6. Access the URL http://localhost:4200
Find the print screen of the output.
