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




We can define Selecting Values in Rang Slider. We have fer Parameter pass in <mat-slider> Component.
min: Minimum value(Start Value) of the Range Slider.
max: Maximum value(End Value) of the Range Slider.
step: Increment value when we scroll the slider.
value: Default value of the range slider.
Here is the example code how to display the Slider with min,max,step & value


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


Output display all above code Display in below video.

Spread the love
  • 24
  •  
  •  
  •  
  •  
  •  
  •  
  •