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
<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
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
Thumb label & tick Mark with range slider code display below
Output display all above code Display in below video.
24