Angular PrimeNG Form Slider Min-Max Компонент
Angular PrimeNG — это фреймворк с открытым исходным кодом с богатым набором собственных компонентов пользовательского интерфейса Angular, которые используются для отличного стиля, и этот фреймворк используется для очень легкого создания адаптивных веб-сайтов. В этой статье мы узнаем, как использовать компонент Slider Min-Max в Angular PrimeNG.
Компонент Slider — это элемент ввода, который принимает числовые входные данные.
Синтаксис:
<p-slider [(ngModel)]="..." [min]="..." [max]="..."> </p-slider>
Минимальные и максимальные свойства слайдера формы Angular PrimeNG:
- min: используется для установки минимального граничного значения, имеет числовой тип данных, а значение по умолчанию равно 0.
- max: используется для установки максимального граничного значения, имеет числовой тип данных, значение по умолчанию — 100.
Создание приложения Angular и установка модуля:
Шаг 1: Создайте приложение Angular, используя следующую команду.
ng new appname
Шаг 2: После создания папки проекта, т. е. имени приложения, перейдите к ней с помощью следующей команды.
cd appname
Шаг 3: Установите PrimeNG в указанный вами каталог.
npm install primeng --save npm install primeicons --save
Структура проекта: Это будет выглядеть следующим образом.
Чтобы запустить указанный выше файл, выполните следующую команду:
ng serve --save
Пример 1. В этом базовом примере показано, как использовать компонент Min-Max ползунка формы Angular PrimeNG с использованием атрибута min.
- приложение.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 { } |
Выход:
Пример 2: Это еще один пример, который показывает, как использовать компонент Min-Max ползунка формы Angular PrimeNG с использованием атрибутов max.
- приложение.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 { } |
Выход:
Ссылка: https://primefaces.org/primeng/slider