Angular PrimeNG表单滑块属性

Angular PrimeNG是一个用于Angular应用程序的交互式UI组件的集合。开发人员可以使用这些组件在短时间内制作出漂亮的、响应式的网页界面，因为大多数组件都实现了所有必要的功能。在这篇文章中，我们将讨论Angular PrimeNG表单滑块属性。

滑块组件是PrimeNG提供的一个输入组件。它可以用来接受用户的数字输入。通过使用滑块来接受输入，我们可以使我们的网络应用更加互动。

Angular PrimeNG表格滑块属性：

animate。这是一个布尔属性，启用后，当用户点击滑块栏时，会显示一个动画。
disabled:当此属性出现时，它将禁用滑块组件。
min: 它代表滑块输入的最小值。默认值为0。
max:它代表滑块输入的最大值。默认值是100。
orientation（方向）。IT指定滑块的方向。它接受字符串值。接受的值是 “水平 “和 “垂直”。
步骤。滑块的值应该增加的系数。默认值是1。
范围。这是一个布尔属性，用于接受用户的数字范围输入。
样式。它是滑块组件的内联样式。
styleClass。它是滑块组件的风格类。
tabindex。它定义了元素在标签顺序中的索引
ariaLabelledBy。它是用来建立标签和组件之间的关系。

语法:

<p-slider 
    [(ngModel)]="..." 
    [range]="true | false"
    orientation="vertical | horizontal"
    [step]="1"
    [min]="..." 
    [max]="...">
</p-slider>

创建Angular应用程序并安装模块：

第1步：使用以下命令创建一个Angular应用程序。

ng new appname

第2步：创建你的项目文件夹即appname后，使用以下命令移动到它。

cd appname

第3步：最后，在你给定的目录中安装PrimeNG。

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

项目结构：在完成上述步骤后，项目结构将看起来像这样。

Angular PrimeNG表单滑块属性

Project Structure

例子1：在这个例子中，我们使用滑块组件的min, max,和step属性，使用户只选择4个值，即15、30、45和60。

app.component.html:

<h2 style="color: green">GeeksforGeeks</h2>
<h3>
    Angular PrimeNG Form 
    Slider Properties
</h3>
  
<p-slider 
    [(ngModel)]="sliderValue"
    [step]="15" 
    [min]="15" 
    [max]="60">
</p-slider>
  
<h2>Current Value = {{sliderValue}}</h2>

app.component.ts:

import { Component } from "@angular/core";
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styles: [
        `:host ::ng-deep .p-slider{
            width: 300px;
            margin-top: 50px;
        }
        `
    ]
})
  
export class AppComponent {
    sliderValue: number = 15;
}

app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { SliderModule } from 'primeng/slider';
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        SliderModule,
        FormsModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

输出:

Angular PrimeNG表单滑块属性

例子2：在这个例子中，我们将滑块的range属性设置为 “true “以接受用户的范围输入，并将orientation属性设置为 “垂直 “以使滑块垂直。

app.component.html:

<h2 style="color: green">GeeksforGeeks</h2>
<h3>
    Angular PrimeNG Form 
    Slider Properties
</h3>
  
<p-slider 
    [(ngModel)]="sliderValues"
    [range]="true"
    orientation="vertical">
</p-slider>
  
<h2>
    Current Value = 
    {{sliderValues[0]}} - {{sliderValues[1]}}
</h2>

app.component.ts:

import { Component } from "@angular/core";
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
})
  
export class AppComponent {
    sliderValues: number[] = [10, 60];
}

app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { SliderModule } from 'primeng/slider';
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        SliderModule,
        FormsModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

输出:

Angular PrimeNG表单滑块属性