Angular PrimeNG Form Slider Min-Max Component Last Updated : 28 Apr, 2025 Comments Improve Suggest changes Like Article Like Report 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 Min-Max Component in Angular PrimeNG. The Slider Component is an element of input that accepts numerical inputs. Syntax: <p-slider [(ngModel)]="..." [min]="..." [max]="..."> </p-slider> Angular PrimeNG Form Slider Min-Max properties: min: It is used to set the Minimum boundary value, It is of number data type, and the default value is 0.max: It is used to set the Maximum boundary value, It is of number data type, and the default value is 100. 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 shows how to use the Angular PrimeNG Form Slider Min-Max Component using the min attribute. app.component.html: HTML <h1 style="color: green">GeeksforGeeks</h1> <h5>Angular PrimeNG Slider Min-Max</h5> <h3>Slider Value: {{gfg}}</h3> <p-slider [(ngModel)]="gfg" [min]="40"></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 shows how to use the Angular PrimeNG Form Slider Min-Max Component using the max attributes. app.component.html: HTML <h1 style="color: green">GeeksforGeeks</h1> <h5>Angular PrimeNG Slider Min-Max</h5> <input type="number" pInputText [(ngModel)]="gfg"/> <br/><br/> <p-slider [(ngModel)]="gfg" [min]="50" [max]="70"></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: Reference: https://primefaces.org/primeng/slider Comment More infoAdvertise with us Next Article Angular PrimeNG Form Slider Min-Max Component Y yourcontactformsubmitted Follow Improve Article Tags : Technical Scripter Web Technologies AngularJS Technical Scripter 2022 Angular-PrimeNG PrimeNG-Form +2 More Similar Reads AutoComplete ComponentAngular PrimeNG Form AutoComplete Dropdown ComponentAngular 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. This article will show us how to use TreeTable Column Resize in Angular PrimeNG. AutoComplete Dropdo 11 min read Angular PrimeNG Form AutoComplete Multiple Selection ComponentAngular 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. This article will show us how to use TreeTable Column Resize in Angular PrimeNG. AutoComplete Multip 15+ min read Angular PrimeNG Form AutoComplete Objects ComponentAngular 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. This article will show us how to use Form AutoComplete Objects Component in Angular PrimeNG. Form Au 15+ min read Angular PrimeNG Form AutoComplete Force Selection ComponentAngular 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. This article will show us how to use TreeTable Column Resize in Angular PrimeNG. Form AutoComplete F 15+ min read Angular PrimeNG Form AutoComplete Templating ComponentAngular 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 the Form AutoComplete Templating Component in Angular PrimeNG. The Form 4 min read Angular PrimeNG Form AutoComplete Animation Configuration ComponentAngular PrimeNG is an open-source framework with a rich set of native Angular UI components that helps to create an attractive user interface with enhanced functionality. These components can be utilized for great styling & are used to make responsive websites with very much ease. In this articl 5 min read Angular PrimeNG Form AutoComplete Properties ComponentAngular 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 the Form AutoComplete Properties Component in Angular PrimeNG. The Form 8 min read Angular PrimeNG Form AutoComplete Templates ComponentAngular PrimeNG is an open-source front-end UI framework developed by PrimeTek for developing efficient and scalable angular applications. Using PrimeNG in their projects helps developers to cut down the development time and focus on other important areas of the application. In this article, we will 15+ min read Angular PrimeNG Form AutoComplete Styling ComponentAngular 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 about Angular PrimeNG Form AutoComplete Styling Component. The Form Au 4 min read Calendar ComponentAngular PrimeNG Form Calendar Popup and Inline ComponentAngular PrimeNG is a collection of UI components for the Angular framework developed and maintained by Google. It enables developers to develop scalable and responsive interfaces in less time and hence increases productivity. In this article, we will see Angular PrimeNG Form Calendar Popup and Inlin 3 min read Angular PrimeNG Form Calendar Selection Mode ComponentAngular PrimeNG is a collection of UI components for the Angular framework developed and maintained by Google. It enables developers to develop scalable and responsive interfaces in less time and hence increases productivity. In this article, we will see Angular PrimeNG Form Calendar Selection Mode 3 min read Angular PrimeNG Form Calendar DateFormat ComponentAngular PrimeNG is a collection of UI components for the Angular framework developed and maintained by Google. It enables developers to develop scalable and responsive interfaces in less time and hence increases productivity. In this article, we will see Angular PrimeNG Form Calendar DateFormat Comp 4 min read CascadeSelect ComponentAngular PrimeNG Form CascadeSelect Basic ComponentAngular 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. This article will show us how to use TreeTable Column Resize in Angular PrimeNG. Angular PrimeNG For 4 min read Angular PrimeNG Form CascadeSelect Templating ComponentAngular 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. This article will show us how to use the calendar component in angular ngx bootstrap. CascadeSelect 3 min read Angular PrimeNG Form CascadeSelect Properties ComponentAngular 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. This article will show us how to use the Angular PrimeNG Form CascadeSelect Properties Component. Th 5 min read Angular PrimeNG Form CascadeSelect Templates ComponentAngular 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. This article will show us how to use Angular PrimeNG Form CascadeSelect Templates Component. The Cas 4 min read Angular PrimeNG Form CascadeSelect Styling ComponentAngular 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  Form CascadeSelect Styling Component in Angular PrimeNG 4 min read Checkbox ComponentAngular PrimeNG Form Checkbox Basic ComponentAngular PrimeNG is a UI component library for Angular Applications. It offers many pre-built themes and UI components for a variety of tasks like inputs, menus, charts, Buttons, etc. In this article, we will be seeing Angular PrimeNG Form Checkbox Basic Component. The Checkbox component provided by 3 min read Angular PrimeNG Form Checkbox Multiple ComponentAngular PrimeNG is a UI component library for Angular Applications. It offers many pre-built themes and UI components for a variety of tasks like inputs, menus, charts, Buttons, etc. In this article, we will see the Angular PrimeNG Form Checkbox Multiple Component. The Checkbox Component provided by 3 min read Angular PrimeNG Form Checkbox Dynamic Values, Preselection, Value Binding and Disabled OptionAngular PrimeNG is a UI component library for Angular Applications. It offers many pre-built themes and UI components for a variety of tasks like inputs, menus, charts, Buttons, etc. In this article, we will be seeing Angular PrimeNG Form Checkbox Dynamic Values, Preselection, Value Binding, and Dis 3 min read Angular PrimeNG Form Checkbox Label ComponentAngular PrimeNG is an open-source library that consists 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 Angular PrimeNG Form Checkbox Label Component. The Checkbox component provi 4 min read Angular PrimeNG Form Checkbox Boolean Value ComponentAngular PrimeNG is a UI component library for Angular Applications. It offers many pre-built themes and UI components for a variety of tasks like inputs, menus, charts, Buttons, etc. In this article, we will be seeing the Form Checkbox Boolean Value Component in Angular PrimeNG. The Checkbox compone 3 min read Angular PrimeNG Form Checkbox Properties ComponentAngular 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. This article will show us how to use the calendar component in angular ngx bootstrap. Checkbox Prope 4 min read Angular PrimeNG Form Checkbox Events ComponentAngular PrimeNG is an open-source front-end UI library that has many native Angular UI components which help developers to build a fast and scalable web solution. In this article, we will be seeing Angular PrimeNG Form Checkbox Events Component. The Checkbox Component provided by PrimeNG is an exten 4 min read Angular PrimeNG Form Checkbox ComponentAngular 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. This article will show us how to use the calendar component in angular ngx bootstrap. Checkbox Compo 5 min read Angular PrimeNG Form Checkbox ComponentAngular 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. This article will show us how to use the calendar component in angular ngx bootstrap. Checkbox Compo 5 min read Chips ComponentAngular PrimeNG Form Chips Comma Separator ComponentAngular PrimeNG is an open-source library that consists 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 Angular PrimeNG Form Chips Comma Separator Component. The Chips Component i 3 min read Angular PrimeNG Form Chips Template ComponentAngular 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. This article will show us how to use the calendar component in angular ngx bootstrap.  Chips Templat 3 min read Angular PrimeNG Form Chips Custom Content ComponentAngular 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. This article will show us how to use the Angular PrimeNG Form Chips Custom Content Component. The Ch 3 min read Angular PrimeNG Form Chips Properties ComponentAngular 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. This article will show us how to use the calendar component in angular ngx bootstrap. Chips Componen 4 min read Angular PrimeNG Form Chips Events ComponentAngular PrimeNG is an open-source library that consists 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 Angular PrimeNG Form Chips Events Component. The Form Chips Component in PrimeN 3 min read Angular PrimeNG Form Chips Template ComponentAngular 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. This article will show us how to use the calendar component in angular ngx bootstrap.  Chips Templat 3 min read ColorPicker ComponentAngular PrimeNG Form ColorPicker Formats ComponentAngular 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. This article will show us how to use the Angular PrimeNG Form ColorPicker Formats Component. The Col 3 min read Angular PrimeNG Form ColorPicker Overlay and Inline ComponentAngular 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. This article will show us how to use the Angular PrimeNG Form ColorPicker Overlay and Inline Compone 3 min read Angular PrimeNG Form ColorPicker Animation Configuration ComponentAngular PrimeNG is a front-end UI component library for Angular Applications. It is developed and maintained by PrimeTek. PrimeNG helps developers to create stunning web interfaces in less time using pre-built components and themes. In this article, we will discuss the Angular PrimeNG Form ColorPick 3 min read Angular PrimeNG Form ColorPicker Properties ComponentAngular PrimeNG is a front-end UI component library for Angular Applications. It is developed and maintained by PrimeTek. PrimeNG helps developers to create stunning web interfaces in less time using pre-built components and themes. In this article, we will discuss the Angular PrimeNG Form ColorPick 4 min read Angular PrimeNG Form ColorPicker Events ComponentAngular PrimeNG is a front-end UI component library for Angular Applications. It is developed and maintained by PrimeTek. PrimeNG helps developers to create stunning web interfaces in less time using pre-built components and themes. In this article, we will discuss the Angular PrimeNG Form ColorPick 3 min read Angular PrimeNG Form ColorPicker Styling ComponentAngular 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 the Angular PrimeNG Form ColorPicker Styling Component. The ColorPicker 3 min read Dropdown ComponentAngular PrimeNG Form Dropdown Basic ComponentAngular PrimeNG is an open-source front-end UI framework developed by PrimeTek for developing efficient and scalable angular applications. Using PrimeNG in their projects helps developers to cut down the development time and focus on other important areas of the application. In this article, we will 3 min read Angular PrimeNG Form Dropdown Group ComponentAngular 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 calendar component in angular ngx bootstrap. Dropdown G 5 min read Angular PrimeNG Form Dropdown Advanced with Templating, Filtering and Clear Icon ComponentAngular 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 calendar component in angular ngx bootstrap. Dropdown A 5 min read Editor ComponentAngular PrimeNG Form Editor Default ComponentAngular 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. This article will show us how to use the Form Editor Default Component in Angular PrimeNG. We will a 3 min read Angular PrimeNG Form Editor Custom Toolbar ComponentAngular 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. This article will show us how to use the Form Editor Custom Toolbar Component in Angular PrimeNG. We 3 min read Angular PrimeNG Form Editor Custom Toolbar ComponentAngular 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. This article will show us how to use the Form Editor Custom Toolbar Component in Angular PrimeNG. We 3 min read Angular PrimeNG Form Editor Properties ComponentAngular 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. This article will see how to use the Form Editor Properties Component in Angular PrimeNG. The Form E 4 min read Angular PrimeNG Form Editor EventsAngular 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 Angular PrimeNG Form Editor Events. The Form Editor is a Quill-based ri 3 min read Angular PrimeNG Form Editor ComponentAngular 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 Form Editor Component in Angular PrimeNG. The Form Edito 3 min read Angular PrimeNG Form Editor ComponentAngular 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 Form Editor Component in Angular PrimeNG. The Form Edito 3 min read Angular PrimeNG Form Editor Styling ComponentAngular 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 Angular PrimeNG Form Editor Styling Component. The Form Editor is a Qui 3 min read InputGroup ComponentAngular PrimeNG Form InputGroup Addons ComponentAngular 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 learn how to use the InputGroup Addons Component in Angular PrimeNG. The In 3 min read Angular PrimeNG Form InputGroup Multiple Addons ComponentAngular 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 learn how to use the InputGroup Multiple Addons Component in Angular PrimeN 3 min read Angular PrimeNG Form InputGroup Button Addons ComponentAngular 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 learn how to use the InputGroup Button Addons Component in Angular PrimeNG. 3 min read Angular PrimeNG InvalidState ComponentAngular 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 InvalidState component in angular primeNG. InvalidState 2 min read InputMask ComponentAngular PrimeNG Form InputMask Mask ComponentAngular 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. This article will show us how to use the Form InputMask Mask Component in Angular PrimeNG. We will a 3 min read Angular PrimeNG Form InputMask SlotChar ComponentAngular 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. This article will show us how to use the Form InputMask SlotChar Component in Angular PrimeNG. We wi 3 min read Angular PrimeNG Form InputMask Optional Values ComponentAngular PrimeNG is a collection of UI components for the Angular framework developed and maintained by Google. It enables developers to develop scalable and responsive interfaces in less time and hence increases productivity. In this article, we will be seeing Angular PrimeNG Form InputMask Optional 3 min read Angular PrimeNG Form InputMask Properties ComponentAngular 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 calendar component in angular ngx bootstrap. InputMask 4 min read Angular PrimeNG Form InputMask Events ComponentAngular PrimeNG is a collection of Angular UI components. It is an open-source library developed by PrimeTek. It has many ready-to-use components that make it one of the top choices of angular developers when it comes to choosing a UI library. In this article, we will see the Angular PrimeNG Form In 4 min read Angular PrimeNG Form InputMask Mask ComponentAngular 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. This article will show us how to use the Form InputMask Mask Component in Angular PrimeNG. We will a 3 min read Angular PrimeNG Form InputMask Styling ComponentAngular PrimeNG is a collection of Angular UI components. It is an open-source library developed by PrimeTek. It has many ready-to-use components that make it one of the top choices of angular developers when it comes to choosing a UI library. In this article, we will see the Angular PrimeNG Form In 4 min read Like