Angular PrimeNG Form Slider Styling

Angular PrimeNG is a collection of Interactive UI components for Angular applications. Developers can use these components to make beautiful and responsive web interfaces in no time as most of the components have all the necessary functions implemented. In this article, we will be discussing Angular PrimeNG Form Slider Styling.

The Slider component is used to take numerical input from the user. Using a slider for taking inputs from the user makes out website more interactive and betters the user experience.

Angular PrimeNG Form Slider Styling Classes:

• p-slider: This class is applied to the slider container element.
• p-slider-range: This class is applied to the filled part of the slider.
• p-slider-handle: This class is applied to the handle of the slider component.

Creating Angular Application and Installing the Module:

Step 1: Create an Angular application using the following command.

ng new appname

Step 2: After creating your project folder i.e. appname, move to it using the following command.

cd appname

Step 3: Finally, Install PrimeNG in your given directory.

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

Project Structure: The project Structure will look like this after following the above steps:

Project Structure

Example 1: In this article, we used the “p-slider-handle” to change the color of the slider handle to green.

• app.component.html:

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:

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:

Javascript

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:

Javascript

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 { }

Output:

Example 2: In this article, we used the styling classes of the slider element to increase its thickness and to change the fill color of the slider.

• app.component.html:

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:

CSS

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

:host ::ng-deep .p-slider .p-slider-range{
    background: green;
}

• app.component.ts:

Javascript

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:

Javascript

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 { }

Output:

Reference: http://primefaces.org/primeng/slider