Компонент ориентации слайдера формы Angular PrimeNG

Опубликовано: 20 Февраля, 2023

Angular PrimeNG — это фреймворк с открытым исходным кодом с богатым набором собственных компонентов пользовательского интерфейса Angular, которые используются для отличного стиля, и этот фреймворк используется для очень легкого создания адаптивных веб-сайтов. Эта статья покажет нам, как использовать компонент ориентации слайдера в Angular PrimeNG.

Компонент Slider — это элемент ввода, который принимает числовые входные данные.

Синтаксис:

<p-slider 
    [(ngModel)]="..." 
    orientation="...">
</p-slider>

Свойства ориентации слайдера формы Angular PrimeNG:

ориентация: используется для установки ориентации ползунка, допустимыми значениями являются горизонтальное и вертикальное, это строковый тип данных, а значение по умолчанию — горизонтальное.

Создание приложения Angular и установка модуля:

Шаг 1: Создайте приложение Angular, используя следующую команду.

ng new appname

Шаг 2: После создания папки проекта, т. е. имени приложения, перейдите к ней с помощью следующей команды.

cd appname

Шаг 3: Установите PrimeNG в указанный вами каталог.

npm install primeng --save
npm install primeicons --save

Структура проекта: Это будет выглядеть следующим образом.

Чтобы запустить указанный выше файл, выполните следующую команду:

ng serve --save

Пример 1. В этом базовом примере показано, как использовать компонент ориентации ползунка формы Angular PrimeNG, используя горизонтальную ориентацию.

приложение.component.html:

HTML

<h1 style="color: green">GeeksforGeeks</h1>
<h5>Angular PrimeNG Slider Orientation</h5>
<input type="text" pInputText [(ngModel)]="gfg"/>
<br/><br/>
<p-slider 
    [(ngModel)]="gfg" 
    orientation="horizontal">
</p-slider>

app.component.ts:

Javascript

import { Component } from "@angular/core";
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html"
})
export class AppComponent { 
    gfg: number;
}

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: Это еще один пример, который показывает, как использовать компонент ориентации ползунка формы Angular PrimeNG, используя вертикальную ориентацию.

приложение.component.html:

HTML

<h1 style="color: green">GeeksforGeeks</h1>
<h5>Angular PrimeNG Form Slider Orientation Component</h5>
<input type="text" pInputText [(ngModel)]="gfg"/>
<br/><br/>
<p-slider 
    [(ngModel)]="gfg" 
    orientation="vertical">
</p-slider>

app.component.ts:

Javascript

import { Component } from "@angular/core";
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html"
})
  
export class AppComponent { 
    gfg: number;
}

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

Technical Scripter Picked AngularJS

Компонент ориентации слайдера формы Angular PrimeNG

HTML

Javascript

Javascript

HTML

Javascript

Javascript

РЕКОМЕНДУЕМЫЕ СТАТЬИ