Angular PrimeNG Form Slider Basic 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 see how to use the Slider Basic Component in Angular PrimeNG.
The Slider Component facilitates an input element that accepts numerical inputs.
Syntax:
<p-slider [(ngModel)]="..."></p-slider>
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:
- To run the above file run the below command:
ng serve --save
Example 1: This basic example illustrates how to use the Angular PrimeNG Form Slider Basic Component.
- app.component.html:
HTML
< h1 style = "color: green" > w3wiki </ h1 > < h5 >Angular PrimeNG Slider Basic</ h5 > < p-slider ></ p-slider > |
- app.component.ts:
Javascript
import { Component } from '@angular/core' ; @Component({ selector: 'app-root' , templateUrl: './app.component.html' }) export class AppComponent { } |
- app.module.ts:
Javascript
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' ; import { InputTextModule } from 'primeng/inputtext' ; @NgModule({ imports: [ BrowserModule, BrowserAnimationsModule, SliderModule, InputTextModule, FormsModule ], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } |
Output:
Example 2: This is another example that illustrates how to use the Angular PrimeNG Form Slider Basic Component using some custom initial value and displaying the slider value on the screen.
- app.component.html:
HTML
< h1 style = "color: green" > w3wiki </ h1 > < h5 >Angular PrimeNG Slider Basic</ h5 > < h3 >Slider Value: {{gfg}}</ h3 > < p-slider [(ngModel)]="gfg"></ p-slider > |
- app.component.ts:
Javascript
import { Component } from '@angular/core' ; @Component({ selector: 'app-root' , templateUrl: './app.component.html' }) export class AppComponent { gfg: number = 30; } |
- app.module.ts:
Javascript
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' ; import { InputTextModule } from 'primeng/inputtext' ; @NgModule({ imports: [ BrowserModule, BrowserAnimationsModule, SliderModule, InputTextModule, FormsModule ], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } |
Output:
Reference: https://primefaces.org/primeng/slider
Contact Us