Angular Slider is an input component to provide a numerical input.
Setup
Refer to PrimeNG setup documentation for download and installation steps for your environment.
Import
import {SliderModule} from 'primeng/slider';
Getting Started
Two-way binding is defined using the standard ngModel directive.
<p-slider [(ngModel)]="val"></p-slider>
export class MyModel {
val: number;
}
Model Driven Forms
Slider can be used in a model driven form as well.
<p-slider formControlName="age"></p-slider>
Min-Max
Boundaries are specified with min and max attributes.
<p-slider [(ngModel)]="val" [min]="0" [max]="100"></p-slider>
Step
Step factor is 1 by default and can be customized with step option.
<p-slider [(ngModel)]="val" [step]="10"></p-slider>
Range
Range slider provides two handles to define two values. In this case, value binding should refer to an array.
<p-slider [(ngModel)]="rangeValues" [range]="true"></p-slider>
export class MyModel {
rangeValues: number[];
}
Orientation
Sliders supports two orientation, horizontal is the default and other alternative is vertical.
<p-slider [(ngModel)]="val" orientation="vertical"></p-slider>
Theming
Slider supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.
Resources
Visit the PrimeNG Slider showcase for demos and documentation.