Angular PrimeNG表格滑块的样式

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

滑块组件是用来接受用户的数字输入的。使用滑块从用户那里获取输入信息，使网站更具互动性，并改善用户体验。

Angular PrimeNG表格滑块造型类：

p-slider。该类应用于滑块容器元素。
p-slider-range : 该类应用于滑块的填充部分。
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表格滑块的样式

Project Structure

例子1：在本文中，我们使用 “p-slider-handle “来改变滑块手柄的颜色为绿色。

app.component.html:

<h2 style="color: green">GeeksforGeeks</h2>
<h3>
    Angular PrimeNG Form 
    Slider Styling
</h3>
  
<h4>Use of "p-slider-handle" class</h4>
<p-slider 
    [(ngModel)]="sliderValue"
    [step]="10">
</p-slider>

app.component.css:

:host ::ng-deep .p-slider {
    width: 300px;
}
  
:host ::ng-deep .p-slider-handle {
    border-color: green;
}
  
:host ::ng-deep .p-slider .p-slider-handle:hover {
    border-color: green;
    background: green;
}
  
:host ::ng-deep .p-slider .p-slider-handle:focus {
    border-color: green;
    box-shadow: none;
    background: green;
}

app.component.ts:

import { Component } from "@angular/core";
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ['./app.component.css']
})
  
export class AppComponent {
    sliderValue: number = 0;
}

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：在这篇文章中，我们使用了滑块元素的造型类来增加其厚度并改变滑块的填充颜色。

app.component.html:

<h2 style="color: green">GeeksforGeeks</h2>
<h3>
    Angular PrimeNG Form 
    Slider Styling
</h3>
  
<p-slider 
    [(ngModel)]="sliderValue"
    [step]="5">
</p-slider>

app.component.css:

:host ::ng-deep .p-slider {
    width: 300px;
    height: 20px;
}
  
:host ::ng-deep .p-slider .p-slider-range{
    background: green;
}

app.component.ts:

import { Component } from "@angular/core";
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ['./app.component.css']
})
  
export class AppComponent {
    sliderValue: number = 0;
}

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表格滑块的样式