Angular PrimeNG表单滑块事件

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

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

Angular PrimeNG表格滑块事件：

onChange。当使用滑块的值发生变化时，这接受一个回调。
onSlideEnd。当用户停止滑块时，这接受一个回调。

语法:

<p-slider 
    [(ngModel)]="..." 
    orientation="..."
    **(event-name)="callbackFunction()"** >
</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：在这个例子中，我们使用了滑块的onChange事件，所以每当我们改变滑块的值时，就会显示一条烤面包的信息，并显示更新的值。在这里，我们对代码做了一些修改，所以祝酒词只对一个值显示一次。

app.component.html:

<h2 style="color: green">GeeksforGeeks</h2>
<h3>
    Angular PrimeNG Form 
    Slider Events
</h3>
  
<p-slider 
    [(ngModel)]="sliderValue"
    [step]="10"
    (onChange)="handleValueChange($event)">
</p-slider>
  
<p-toast></p-toast>

app.component.ts:

import { Component } from "@angular/core";
import { MessageService } from "primeng/api";
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styles: [
        `:host ::ng-deep .p-slider{
            width: 300px;
        }
        `
    ],
    providers: [MessageService]
})
  
export class AppComponent {
    constructor(private ms: MessageService){}
    sliderValue: number = 0;
    preVal = undefined;
  
    handleValueChange(e: any)
    {
        if(e.value == this.preVal) return;
        this.ms.add({
            severity: "success",
            summary: "New Value: " + e.value,
            detail: "Slider Value Changed"
  
        });
        this.preVal = e.value;
    }
}

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

输出:

Angular PrimeNG表单滑块事件

例子2：在这个例子中，我们使用onSlideEnd事件，每当滑块停止时，就显示一个带有新值的祝酒词。

app.component.html:

<h2 style="color: green">GeeksforGeeks</h2>
<h3>
    Angular PrimeNG Form 
    Slider Events
</h3>
  
<h3>SlideEnd Event</h3>
<p-slider 
    [(ngModel)]="sliderValue"
    [step]="10"
    (onSlideEnd)="handleSlideEnd($event)">
</p-slider>
  
<p-toast></p-toast>

app.component.ts:

import { Component } from "@angular/core";
import { MessageService } from "primeng/api";
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styles: [
        `:host ::ng-deep .p-slider{
            width: 300px;
        }
        `
    ],
    providers: [MessageService]
})
  
export class AppComponent {
    constructor(private ms: MessageService){}
    sliderValue: number = 0;
  
    handleSlideEnd(e: any)
    {
        this.ms.add({
            severity: "info",
            summary: "New Value: " + e.value,
            detail: "Slide End Event"
        });
    }
}

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

输出:

Angular PrimeNG表单滑块事件