Open In App

Angular PrimeNG Form Slider Events

Improve
Improve
Like Article
Like
Save
Share
Report

Angular PrimeNG is a collection of Interactive UI components for Angular applications. Developers can use these components to make beautiful and responsive web interfaces in no time as most of the components have all the necessary functions implemented. In this article, we will be discussing Angular PrimeNG Form Slider Events.

The Slider component is an input component provided by PrimeNG. It can be used to take numerical input from the users. By using a slider to take input, we can make our web app more interactive.

Angular PrimeNG Form Slider Events:

  • onChange: This accepts a callback when the value changes using the slider.
  • onSlideEnd: This accepts a callback when the user stops the slider.

 

Syntax:

<p-slider 
    [(ngModel)]="..." 
    orientation="..."
    (event-name)="callbackFunction()">
</p-slider>

Creating Angular Application and Installing the Module:

Step 1: Create an Angular application using the following command.

ng new appname

Step 2: After creating your project folder i.e. appname, move to it using the following command.

cd appname

Step 3: Finally, Install PrimeNG in your given directory.

npm install primeng --save
npm install primeicons --save

Project Structure: The project Structure will look like this after following the above steps:

Project Structure

Example 1: In this example, we used the onChange event of the slider so whenever we change the value of the slider, a toast message will be shown with the updated value. Here we modified the code a little so the toast message is shown once for one value.

  • app.component.html:

HTML




<h2 style="color: green">GeeksforGeeks</h2>
<h3>
    Angular PrimeNG Form 
    Slider Events
</h3>
  
<p-slider 
    [(ngModel)]="sliderValue"
    [step]="10"
    (onChange)="handleValueChange($event)">
</p-slider>
  
<p-toast></p-toast>


  • app.component.ts:

Javascript




import { Component } from "@angular/core";
import { MessageService } from "primeng/api";
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styles: [
        `:host ::ng-deep .p-slider{
            width: 300px;
        }
        `
    ],
    providers: [MessageService]
})
  
export class AppComponent {
    constructor(private ms: MessageService){}
    sliderValue: number = 0;
    preVal = undefined;
  
    handleValueChange(e: any)
    {
        if(e.value == this.preVal) return;
        this.ms.add({
            severity: "success",
            summary: "New Value: " + e.value,
            detail: "Slider Value Changed"
  
        });
        this.preVal = e.value;
    }
}


  • app.module.ts:

Javascript




import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { ToastModule } from 'primeng/toast';
import { SliderModule } from 'primeng/slider';
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        SliderModule,
        ToastModule,
        FormsModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }


Output:

 

Example 2: In this example, we used the onSlideEnd event to show a toast message with the new value whenever the slider is stopped.

  • app.component.html:

HTML




<h2 style="color: green">GeeksforGeeks</h2>
<h3>
    Angular PrimeNG Form 
    Slider Events
</h3>
  
<h3>SlideEnd Event</h3>
<p-slider 
    [(ngModel)]="sliderValue"
    [step]="10"
    (onSlideEnd)="handleSlideEnd($event)">
</p-slider>
  
<p-toast></p-toast>


  • app.component.ts:

Javascript




import { Component } from "@angular/core";
import { MessageService } from "primeng/api";
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styles: [
        `:host ::ng-deep .p-slider{
            width: 300px;
        }
        `
    ],
    providers: [MessageService]
})
  
export class AppComponent {
    constructor(private ms: MessageService){}
    sliderValue: number = 0;
  
    handleSlideEnd(e: any)
    {
        this.ms.add({
            severity: "info",
            summary: "New Value: " + e.value,
            detail: "Slide End Event"
        });
    }
}


  • app.module.ts:

Javascript




import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { ToastModule } from 'primeng/toast';
import { SliderModule } from 'primeng/slider';
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        SliderModule,
        ToastModule,
        FormsModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }


Output:

 

Reference: http://primefaces.org/primeng/slider



Last Updated : 14 Oct, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads