Using Ignite-UI Slider With Angular V6

Introduction

Slider is a very common control to use today to apply a filter on the data in web applications. Filtering product price range is one of the most common examples. However, jQuery provides a slider by default but that is not very easy to implement. Infragistics has also launched a slider control for Angular which is very easy to implement, enhanced, and quite efficient.

Types of Slider

Range Slider
Continuous Slider
Stepped Slider

In this tutorial, we will cover the following topics.

Implement Slider in Angular.
Filter the data based on a selected range.
Filter the data based on the exact value of the slider.
Calculate the discount amount based on the selected stepped slider value.

Note
For this demo, I am using Visual Studio Code and Angular 6.

Let's get started.

Range Slider

Let's make a new project in Angular. Open any folder in Visual Studio Code where you want to save the project and then, open VS Code terminal and paste the following command. Refer the below code to create a new blank project.

ng new IgniteUI-Slider

Note

In case you did not set up IgniteUI in Angular, please visit here.

Now, make a new component in your project and name it as “Product”. Refer to the below command to make this.

ng g c Product

Let's make another simple class of Product which will be used as our model class.

ng generate class Product

Let us now add some properties to our Product class, as in the code below.

export class Product {
id: number;
name: string;
price: number
constructor(id: number, Name: string, Price: number) {
this.id = id;
this.name = Name;
this.price = Price;
}
}

Now, let's add some data on the the Product page to bind in a simple grid. Go to the product.component.ts file and generate some raw data, as given below.

import { Product } from '../product';
export class ProductComponent implements OnInit {
public data = [
new Product(1, 'Jeans1', 150),
new Product(2, 'Jeans2', 250),
new Product(3, 'Jeans3', 350),
new Product(4, 'Jeans4', 450),
new Product(5, 'Jeans5', 550),
new Product(6, 'Jeans6', 650),
new Product(7, 'Jeans7', 750),
new Product(8, 'Jeans8', 850)
];
}

Add the HTML code to product.component.html file to show the data.

<table width="40%">
<tr>
<th>
Id.
</th>
<th>
Name
</th>
<th>
Price
</th>
</tr>
<tr *ngFor="let p of data">
<td>
{{p.id}}
</td>
<td>
{{p.name}}
</td>
<td>
{{p.price}}
</td>
</tr>
</table>

Change the app.component.html to “<app-product></app-product>”. This is our product app selector which will render the product.html here.

Now, run this application first to check out if the data is properly bound or not. Refer to the below command to run the app.

ng serve --open

The final output will be like Figure 1.

Figure 1.

Now, our data is set up. Let's add the IgniteUI Slider to our project. First, we need to add the IgniteUI CLI to the project.

Note
Follow these steps only if you’ve not set up Ignite UI for Angular before.

Type the command “npm install igniteui-angular”.
In case if hammerJS module does not exist, use command - “ng install hammerjs”.
Change the Styles and Script array in Angular.json.
1. "styles": [
2. "styles.css",
3. "node_modules/igniteui-angular/styles/igniteui-angular.css"
4. ],
5. "scripts": ["node_modules/hammerjs/hammer.min.js"],

Import HammerJS in app.module.ts.
1. “import 'hammerjs';”

Ignite UI uses Angular Material icons. To support these icons, import Material Icon CSS in “Style.css”.
1. @import url('https://fonts.googleapis.com/icon?family=Material+Icons');

Now, we are ready to go for Slider Component. Let's import all necessary components to make the slider work.

//Slider Require Animation
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
//Main Slider Component
import { IgxSliderModule, IgxInputGroupModule, } from "igniteui-angular";
//Use ngModel in App
import { FormsModule, ReactiveFormsModule} from '@angular/forms';

Add all these components in import section of ngModule.

imports : [
BrowserModule,
BrowserAnimationsModule,
IgxSliderModule,
IgxInputGroupModule,
FormsModule,
ReactiveFormsModule

Now, go back to the product.component.ts file and import the Slider.

import { SliderType } from 'igniteui-angular';

Declare two variables inthe class and assign your data to filter the data in initialization. We also need to create a filter function which will be called when slider changes. Also, we have to declare the minimum and maximum values for the slider which we’ll set in HTML. We get set min and max value dynamically according to our data.

public sliderType = SliderType;
public Filterdata: any = {};
ngOnInit() {
// data is same which we declare above
this.Filterdata = this.data;
}
public MinRangeValue = Math.min.apply(Math, this.data.map(function (item) { return item.price; }));
public MaxRangeValue = Math.max.apply(Math, this.data.map(function (item) { return item.price; }));
SliderChange(val: any): void {
this.Filterdata = this.data.filter(obj => obj.price >= val.lower && obj.price <= val.upper);
}

Now, let us add the slider in product.component.html page.

<div class="base">
<label style="font-weight: bold">Product Filter By Price</label>
<div style="width: 40%">
<igx-slider id="slider" [type]="sliderType.RANGE" (onValueChange)="SliderChange(priceRange)"
[minValue]="0"
[maxValue]="1000"
[(ngModel)]="priceRange" [lowerBound]="MinRangeValue"
[upperBound]="MaxRangeValue"></igx-slider>
<h4>
Slider Lower Value is : {{priceRange.lower}}
<br> Slider Upper Value is : {{priceRange.upper}}
</h4>
<div>
<table width="40%">
<tr>
<th>
Id.
</th>
<th>
Name
</th>
<th>
Price
</th>
</tr>
<tr *ngFor="let p of Filterdata">
<td>
{{p.id}}
</td>
<td>
{{p.name}}
</td>
<td>
{{p.price}}
</td>
</tr>
</table>
</div>
</div>
</div>

Now, if you hit ng serve --open command in terminal, you will see the output like in the Figure 2. You can change the slider value to filter the data and when you leave the slider bubble, the data gets filtered. We can also show the current slider's lower and higher values on the page to just check if our data id is filtered correctly or not.

Figure 2.

Continuous Slider

Let's add a continuous slider on the same page to filter the existing data. We will add another slider just after the Range Slider. Open the product.component.html and add the following code.

<igx-slider id="slider" [minValue]="0" [maxValue]="1000" (onValueChange)= "ExactSliderChange(ExactPrice)" [isContinuous]=true [(ngModel)]="ExactPrice"> </igx-slider>
<h4>
Exact Price is : {{ExactPrice}}
</h4>

Add the following code to the product.component.ts to make the continuous slider work.

// Declare another variable
public ExactPrice: number;
// add this to ngOnInit method
this.ExactPrice = this.MinRangeValue;
// This function filter the data on slider value
ExactSliderChange(val: number): void {
this.Filterdata = this.data.filter(obj => obj.price == val);
}

Now, if you hit ng serve --open command in terminal, you will see the output like in the Figure 3. Do note that the continuous slider does not show the bubble on slider.

Figure 3.

Stepped Slider

This is also called “Discrete Slider”. By default, Angular Ignite-UI is discrete and it provides a fixed value to slide in a slider. We can set how many steps we require in the slider by just setting one property. Let’s make a simple discount process where a user can enter the product value and select the slider according to the discount that he/she wants to give on a particular product and the price will be automatically calculated.

To add this, go to the product.component.ts file and add the following code. This is simple code where we set our slider value to 0-100 and set the Step property to 5; this means the slider will have 20 intervals with the value of 5.

<label style="font-weight: bold">Calculate Discount</label>
<br>
<br>
<label>Total Price</label>
<input [(ngModel)]="discount.totalPrice" style="margin: 10px">
<igx-slider [minValue]="0" [maxValue]="100" [step]="5" (onValueChange)= "DiscountSiderChange(discount)" [(ngModel)]="discount.discountInPercent"> </igx-slider>
<h4>
Total Discount Offered : Rs. {{totalAmountAfterDiscount}}
<br><br>
Total Price After Discount : Rs. {{discount.totalPrice - totalAmountAfterDiscount}}
</h4>

Let’s go to the product.component.ts and add the following code where we’re are declaring 2 variables which hold the discount and amount after discount. The slider change function will calculate the discount and bind it to the HTML page using two-way binding.

public totalAmountAfterDiscount: any;
public discount: any = {};
DiscountSiderChange(val: any): void {
this.totalAmountAfterDiscount = (val.totalPrice * val.discountInPercent) / 100;
}

Now, if you hit ng serve --open command in terminal, you will see the output like in Figure 4.

Figure 4.

Summary

Infragistics is working on controls since 1989. They provide controls for almost every language including Angular, JavaScript, ASP.NET, Windows Forms, Xamarin etc. These controls are very well managed and optimized by Infragistic Team. By using Angular two-way binding and IgniteUI Slider, we can easily filter the data without postback.

Here, we are using ValueChange function provided by Slider control which calls the function when we leave the slider but we can also use ngModelChange function which filters the data while the user is swiping the slider simultaneously.