Angular PrimeNG滑块组件

Angular PrimeNG是一个开源框架，它有丰富的原生Angular UI组件，可以用来做很好的造型，这个框架用来做响应式网站，非常方便。在这篇文章中，我们将了解如何在Angular PrimeNG中使用滑块组件。

属性:

animate。它用于在点击滑块时显示一个动画，它是一个布尔数据类型，默认值是false。
disabled。它指定该元素应该被禁用，它是一个布尔数据类型，默认值是false。
min：用于设置最小边界值，它是数字数据类型，默认值为0。
max:用于设置最大边界值，它是数字数据类型，默认值为100。
orientation。用于设置滑块的方向，有效值为水平和垂直，是字符串数据类型，默认值为水平。
step。用于设置增减值的系数，它是数字数据类型，默认值为1。
range:它用于指定两个要挑选的边界值，它是布尔数据类型，默认值是false。
style。它用于设置元素的内联样式，它是字符串数据类型，默认值为null。
styleClass。它用于设置元素的风格类，它是字符串数据类型，默认值为null。
ariaLabelledBy:ariaLabelledBy属性用于建立组件和标签之间的关系，它的值应该是一个或多个元素ID，它是字符串数据类型，默认值为空。
tabindex。它用于设置元素在标签顺序中的索引，它是数字数据类型，默认值是0。

事件:

onChange：它是一个回调，在通过幻灯片改变值时被触发。
onSlideEnd：它是一个回调，当幻灯片停止时被触发。

样式:

p-slider。它是一个风格化的容器元素
p-slider-handle。它是一个风格化的手柄元素

创建Angular应用程序和模块安装。

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

ng new appname

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

cd appname

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

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

项目结构。它将看起来像以下。

Angular PrimeNG滑块组件

例子1：这是一个基本的例子，展示了如何使用Slider组件。

<h5>PrimeNG Slider component</h5>
<p-slider [(ngModel)]="val1"></p-slider>
<p-slider [(ngModel)]="val2" orientation="vertical"></p-slider>

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
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 {}

import { Component } from '@angular/core';
  
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html'
})
export class AppComponent {
  val1: number;
  val2: number;
  rangeValues: number[] = [20, 80];
}

输出:

Angular PrimeNG滑块组件

例子2：在这个例子中，我们将知道如何在滑块组件中使用max属性。

<h5>Basic Slider: </h5>
<p-slider [(ngModel)]="basic"></p-slider>
  
<h5>Input Slider:</h5>
<input type="text" pInputText [(ngModel)]="inp" />
<p-slider [(ngModel)]="inp"></p-slider>
  
<h5>Step Slider:</h5>
<p-slider [(ngModel)]="step" [step]="15"></p-slider>
  
<h5>Range Slider:</h5>
<p-slider [(ngModel)]="range" [range]="true"></p-slider>

import { Component } from '@angular/core';
  
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html'
})
export class AppComponent {
  basic: number;
  
  inp: number = 50;
  
  step: number;
  
  range: number[] = [20, 80];
}

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';
  
@NgModule({
  imports: [BrowserModule, 
              BrowserAnimationsModule, 
            SliderModule, FormsModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

输出:

Angular PrimeNG滑块组件