Angular PrimeNG Slider Component

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. 

<h5>PrimeNG Slider component</h5>
<p-slider [(ngModel)]="val1"></p-slider>
<p-slider [(ngModel)]="val2" orientation="vertical"></p-slider>

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 {}

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. 

<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>

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];
}

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

taran910

Follow

Improve

Article Tags :

• Web Technologies
• AngularJS
• Angular-PrimeNG