Home  >  Angular  >  Angular Material

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

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.
Angular Material Slider

Reference

Slider

Download Source Code

POSTED BY
ARVIND RAI
ARVIND RAI











©2021 concretepage.com | Privacy Policy | Contact Us