Angular PrimeNG Slider Component - GeeksforGeeks

22 Aug, 2021
Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will know how to use the slider component in Angular PrimeNG.
Properties:
animate: It is used to display an animation on click of the slider bar, It is of a boolean data type, the default value is false.
disabled: It specifies that the element should be disabled, It is of a boolean data type, the default value is false.
min: It is used to set the Minimum boundary value, It is of number data type, the default value is 0.
max: It is used to set the Maximum boundary value, It is of number data type, the default value is 100.
orientation:  It is used to set the orientation of the slider, valid values are horizontal and vertical, It is of string data type, the default value is horizontal.
step: It is used to set the factor to increment/decrement the value, It is of number data type, the default value is 1.
range: It is used to specify two boundary values to be picked, It is of the boolean data type, the default value is false.
style: It is used to set the Inline style of the element, It is of string data type, the default value is null.
styleClass: It is used to set the Style class of the element, It is of string data type, the default value is null.
ariaLabelledBy: It is the ariaLabelledBy property that Establishes relationships between the component and label(s) where its value should be one or more element IDs, It is of string data type, the default value is null.
tabindex: It is used to set the Index of the element in tabbing order, It is of number data type, the default value is 0.
Event: 
onChange: it is a callback that is fired on value change via slide.
onSlideEnd: it is a callback that is fired when the slide stops.
Styling:
p-slider: It is a styling Container element
p-slider-handle: It is a styling Handle element
 
Creating Angular Application & module installation:
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: Install PrimeNG in your given directory.
npm install primeng --save
npm install primeicons --save
Project Structure: It will look like the following.
Example 1: This is the basic example that shows how to use the Slider component. 
app.component.html
<h5>PrimeNG Slider component</h5><p-slider [(ngModel)]="val1"></p-slider><p-slider [(ngModel)]="val2" orientation="vertical"></p-slider>
app.module.ts
import { NgModule } from '@angular/core';import { BrowserModule } from '@angular/platform-browser';import { FormsModule } from '@angular/forms';import { HttpClientModule } from '@angular/common/http';import { BrowserAnimationsModule }     from '@angular/platform-browser/animations';import { AppComponent } from './app.component';import { SliderModule } from 'primeng/slider';import { InputTextModule } from 'primeng/inputtext';  @NgModule({  imports: [    BrowserModule,    BrowserAnimationsModule,    SliderModule,    InputTextModule,    FormsModule  ],  declarations: [AppComponent],  bootstrap: [AppComponent]})export class AppModule {}
app.component.ts
import { Component } from '@angular/core';  @Component({  selector: 'my-app',  templateUrl: './app.component.html'})export class AppComponent {  val1: number;  val2: number;  rangeValues: number[] = [20, 80];}
 
Output:
Example 2: In this example, we will know how to use the max property in the slider component. 
app.component.html
<h5>Basic Slider: </h5><p-slider [(ngModel)]="basic"></p-slider>  <h5>Input Slider:</h5><input type="text" pInputText [(ngModel)]="inp" /><p-slider [(ngModel)]="inp"></p-slider>  <h5>Step Slider:</h5><p-slider [(ngModel)]="step" [step]="15"></p-slider>  <h5>Range Slider:</h5><p-slider [(ngModel)]="range" [range]="true"></p-slider>
app.component.ts
import { Component } from '@angular/core';  @Component({  selector: 'my-app',  templateUrl: './app.component.html'})export class AppComponent {  basic: number;    inp: number = 50;    step: number;    range: number[] = [20, 80];}
app.module.ts
import { NgModule } from '@angular/core';import { BrowserModule } from '@angular/platform-browser';import { FormsModule } from '@angular/forms';import { BrowserAnimationsModule }     from '@angular/platform-browser/animations';import { AppComponent } from './app.component';import { SliderModule } from 'primeng/slider';  @NgModule({  imports: [BrowserModule,               BrowserAnimationsModule,             SliderModule, FormsModule],  declarations: [AppComponent],  bootstrap: [AppComponent]})export class AppModule {}
Output:
Reference: https://primefaces.org/primeng/showcase/#/slider
Angular-PrimeNG
AngularJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Angular PrimeNG Dropdown Component
How to make a Bootstrap Modal Popup in Angular 9/8 ?
Angular 10 (blur) Event
How to setup 404 page in angular routing ?
How to create module with Routing in Angular 9 ?
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?