Range Slider In Angular Using Angular Material

In few days ago i have wrote article on how to install Angular Material in our application. If you need to refer how to install it Click here to read it.
In these article I discuss on how to create Range Slider in angular application. For that we need to use component its just like < input type=”range” >.
<mat-slider> select value using keyword, touch or mouse.
<mat-slider> Support three types of orientation called vertical,horizontal & invert.


Vertical: With these attribute Slider scroll vertically and the minimum value on bottom and the maximum value on top. If we use in “invert” then In minimum value at top & Maximum Value on bottom.

Horizontal: With these attribute Slider scroll horizontally and minimum value on the left and the maximum value on the right. If we use in “invert” then In minimum value at right & Maximum Value on left.
First we need to import slider module in our app.module.ts file.

.................
//we need to import first TimepickerModule  From Bootstrap.
import {MatSliderModule} from '@angular/material/slider';
...................
@NgModule({
  .........
  imports: [
                MatSliderModule,
            ...
           ]
})
export class AppModule(){}

Basic Example

<mat-slider></mat-slider>

import { Component } from '@angular/core';
 
@Component({
  selector: 'rangeslider',
  templateUrl: './rangeslider.html'
})
export class RangesliderComponent {
 
}

<mat-slider min="1" max="10" step="1" value="4"></mat-slider>

import { Component } from '@angular/core';
 
@Component({
  selector: 'rangeslider',
  templateUrl: './rangeslider.html'
})
export class RangesliderComponent {
 
}

Thumb label & tick Mark with range slider code display below

<mat-slider thumbLabel min="1" max="10" step="1" value="4"></mat-slider>

<mat-slider tickInterval="2" thumbLabel min="1" max="10" step="1" value="4"></mat-slider>

import { Component } from '@angular/core';
 
@Component({
  selector: 'rangeslider',
  templateUrl: './rangeslider.html'
})
export class RangesliderComponent {
 
}