Angular Material Slider

The <mat-slider> is an Angular Directive used as the enhanced range selector with material styling and animation capabilities. The <mat-slider> allows the selection of a value from a range by mouse, touch or keyboard and it is similar to the <input type="range">. <mat-slider> tag is used when there is a need for a slider in the projects.

Basic slider

Selecting a value

By default, the slider has a minimum value of 0, a maximum value of 100, and a thumb move in increments of 1.

Orientation

The orientation of sliders is horizontal with the minimum value on the left and the maximum value on the right. The vertical attribute is added to the slider to make it vertical with the minimum value and a maximum value at the top.

An inverted feature is also available, specified to flip the axis that moves with the thumb. In the inverted vertical slider the minimum value is on the top and the maximum value is on the bottom.

Thumb label

The selected value of the slider is not visible to the user. But adding the value to the Thumb Lab attribute will be linked to the thumb.

The Material Design Spec uses the Thumb lab attribute (with tickInterval = "1") only for sliders to display discrete values.

Formatting the thumb label

The value in the thumb label is same as the model's value. It is large to fit in the label at the end. If you have to control the displayed value, then use the DisplayWith input.

Slider with custom thumb label formatting

Sliders do not show tick marks on the thumb track. It is enabled by using the tick interval attribute. The value of tick interval is representing the number of steps between ticks.

TickInterval select many steps such that there is 30px of space between ticks.

The slider shows a tick at the beginning and end of the track.

Keyboard interaction

It has the below keyboard bindings:

Key	Action
Right arrow	It increments the value of slider in single step (decrements in RTL).
Up arrow	It increments the value of slider in single step.
Left arrow	It decrements the value of slider in single step (increments in RTL).
Down arrow	It decrements the value by single step.
Page up	It increments the slider value by ten steps.
Page down	It decrements the slider value by ten steps.
End	It set the value to the maximum possible end.

Example:

app.module.ts

import { AppComponent } from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatSliderModule, MatCheckboxModule} from '@angular/material'
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MatSliderModule, MatCheckboxModule,
      FormsModule,
      ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

<mat-slider
   class = "tp-margin"
   [disabled] = "disabled"
   [invert] = "invert"      
   [thumbLabel] = "thumbLabel"     
   [(ngModel)] = "value"
   [vertical] = "vertical">
</mat-slider>
<section class = "tp-section">
   <mat-checkbox class = "tp-margin" [(ngModel)] = "thumbLabel">Show thumb label</mat-checkbox>
</section>
<section class = "tp-section">
   <mat-checkbox class = "tp-margin" [(ngModel)] = "vertical">Vertical</mat-checkbox>
   <mat-checkbox class = "tp-margin" [(ngModel)] = "invert">Inverted</mat-checkbox>
</section>
<section class = "tp-section">
   <mat-checkbox class = "tp-margin" [(ngModel)] = "disabled">Disabled</mat-checkbox>
</section>

app.component.css

.tp-section {
   display: flex;
   align-content: center;
   align-items: center;
   height: 60px;
}
.tp-margin {
   margin: 30px;
}

.mat-slider-horizontal {
   width: 300px;
}
.mat-slider-vertical {
   height: 300px;
}

app.component.ts

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'materialApp'; 
   disabled = false;
   invert = false;
   thumbLabel = false;
   value = 0;
   vertical = false;
}

Output: