Updated March 30, 2023
Introduction to Angular material slider
Angular material provides us one more important feature to select range by using the slider to select any value from any range; this allows the user to select values vis keyboard, mouse, etc. In order to implement this, we have to import the module in order to use this in our application. We can also use the basic slider provided by the material, which will come up with default styling; otherwise, we can modify it using CSS. In the slider, we can spicy the minimum and the maximum value in this range; a user can select a value and specify the initial value for our slider. In the coming section of the tutorial, we will see how we can implement and use this in our angular application without much configuration in detail for better understanding.
Syntax
In this section, we will see the syntax to implement the slider in our application; for this, we will use the material in the build directive to make it quick and fast; let’s get started with it for more clarity, see below;
<mat-slider min="min value" max="1max value" ></mat-slider>As you can see in the above syntax, we are using ‘mat-slider’, which is an in-build directive provided by the material library, which is easy to use and implement. In the coming section of the tutorial, we will see the necessary configurations to make this work; for now, let’s have a look at the practice syntax;
e.g. :
<mat-slider min="0" max="10" step="1" value="0"></mat-slider>How to Create Slider in Angular material?
As of now, we already know that by using an angular material slider, we can allow users to select a value from the given range specified. In this section, we will see what changes and configurations we need to make in order to make this work; let’s get started;
1) MatSliderModule: This is the material library’s module that helps us create the slider. this module must be present or imported inside the root directory or the child module in which you want to create the slider. For reference, please see the code below and paste it to the root module; also declare in the ngmodule.
e.g. :
import {MatSliderModule} from '@angular/material/slider';2) mat-slider: This is the selector which we can use to implement our slider using the material library, the module name is ‘matSlider’, also it has some attribute which helps us to set value for our slider to let’s discuss each of them in detail;
- min: This attribute is used to set the minimum value for our slider
- max: This attribute is used to set the maximum value for our slider.
- step: This will increase the slider with some particular value; let’s say if we have min as 0 and max as 10, and if we have specified the step as 1, it will increment the slider each time by 1.
Now let’s get started with the steps that need to be taken in order to step up our angular material project initially for beginners; see below;
1) First, install the Angular CLI, which enables us to download the required packages and library for our project. You can download it by typing the below command on your command make sure you have already installed node see below;
e.g. :
npm install -g @angular/cli)The above command will install the CLI globally in our system; hence we can use it globally when required.
2) Now, in this step, we will try to create the new angular project from scratch; this project will not be a material project that we have to add later by installing the material dependency inside our project. So just execute the below command on your command Promat, and press enter see below;
e.g. :
ng new your project name
ng new my-first-projectThis command will create the project with the name my-first-project; you can create your project with any name mentioned.
3) Just to make sure, try one command which is mentioned below to install all the required library into our project,
e.g. :
npm install4) Now, you can test and run your project by typing the simple command which is mentioned below. This is just to ensure that we are on the right track and that our project has been created without any errors or bugs inside it.
e.g. :
ng serve5) go on browser and try to run the application with the below URL :
e.g. :
http://localhps:4200
By default, the angular project run on the port 4200; you can change it as per your need if required.
6) Now everything is set, we have our angular project now we will add the material library to our project just by running the below command on the command prompt;
e.g. :
ng add @angular/materialExample of Angular material slider
Below is the sample example of building slider using the angular material library;
1) index.html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons&display=block" rel="stylesheet">
<title>Slider demo ..</title>
</head>
<body class="mat-app-background">
<slider-demo>Loading... </slider-demo>
<span class="version-info">Current build: 12.1.1</span>
</body>
</html>2) module.ts code
import {NgModule} from '@angular/core';
import {MatSliderModule} from '@angular/material/slider';
@NgModule({
exports: [
MatSliderModule,
]
})
export class SliderDemo {}3) demo.slider.component.ts code:
import {Component} from '@angular/core';
/**
* @title Slider demo.
*/
@Component({
selector: 'slider-demo',
templateUrl: 'demo.slider.component.html',
styleUrls: ['demo.slider.component.css'],
})
export class SliderFormattingExample {
slidervalue: number =0;
formatLabel(val: number) {
if (val >= 1000) {
this.slidervalue = val;
return val;
}
return val;
}
}4) demo.slider.component.html code:
<h5><u><i>Slider demo using angular material !!</i></u></h5>
<mat-slider
thumbLabel
[displayWith]="formatLabel"
tickInterval="100"
step="10"
min="0"
max="100"
name ="slidervalue" [(ngModel)] ="slidervalue"></mat-slider>
<br/>
<span>value is ** {{slidervalue}}</span>Output:
Conclusion
Sliders are easy to use, developed, and maintainable. The material library makes it easier to implement this by adding the simple directive as ‘mat-slider’ without many configurations. We can modify the slider by using the different attributes provided by it.
Recommended Articles
We hope that this EDUCBA information on “Angular material slider” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
