Angular Material Slider

By Arvind Rai, 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';

Technologies Used
min, max, step and value
vertical and invert
thumbLabel
displayWith
tickInterval
Keyboard Bindings
Complete Example
Run Application
Reference
Download Source Code

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;

HTML code:

<mat-slider min="1" max="10" step="0.5" [(value)]="valA"></mat-slider>

When we slide, the value of 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>

2. invert: Boolean value. If the value is true the slider will be inverted. If this attribute is absent, the default value is false.

<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>

Create a function as formatThumbLabel in component.

formatThumbLabel(value: number) {
   if (value >= 1000) {
     return Math.round(value / 1000) + 'k';
   }
   return value;
}

For value >= 1000, the text of thumb label will show as 1k, 2k, 3k etc.

`tickInterval`

The tickInterval is relative to the step. Find the sample example.

<mat-slider step="2" tickInterval="5" min="1" max="30"></mat-slider>

In the above code the slider will move from 1 to 30. The given step is 2 and tick interval is 5. It means each tick will appear after 5 steps i.e. on 10, 20 and 30 number. The tick interval can also be set to auto.

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>

app.component.ts

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;
  }
}

app.module.ts

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.