Slider Slider is a component to provide input using dragging of a handle.

Basic: {{val1}}

Input: {{val2}}

Animate: {{val3}}

Step: {{val4}}

Range: {{rangeValues}}

Vertical: {{val5}}

Import

import {Slider} from 'primeng/primeng';

Getting Started

Slider is defined using p-slider element and requires a value binding.

<p-slider [(value)]="val"></p-slider>
export class MyModel {

    val: number;

}

Min-Max

Boundaries are specified with min and max attributes.

<p-slider [(value)]="val" [min]="0" [max]="100"></p-slider>

Step

Step factor is 1 by default and can be customized with step option.

<p-slider [(value)]="val" [step]="10"></p-slider>

Range

Range slider provides two handles to define two values. In this case, use the values property that binds to an array.

<p-slider [(values)]="vals" [range]="true"></p-slider>
export class MyModel {

    rangeValues: number[];

}

Orientation

Sliders supports two orientations, horizontal is the default and other alternative is vertical.

<p-slider [(value)]="val" orientation="vertical"></p-slider>

Attributes

Name Type Default Description
value number null Value of the slider.
value array null Values of the slider as an array in range mode.
animate boolean false When enabled, displays an animation on click of the slider bar.
disabled boolean false When present, it specifies that the element should be disabled.
min number 0 Mininum boundary value.
max number 100 Maximum boundary value.
orientation string horizontal Orientation of the slider, valid values are horizontal and vertical.
step number 1 Step factor to increment/decrement the value.
range boolean false When speficed, allows two boundary values to be picked.
style string null Inline style of the component.
styleClass string null Style class of the component.

Events

Name Parameters Description
onChange value: New value
values: Array of values in range mode
Callback to invoke on value change via slide.
<p-slider [(value)]="val" (onChange)="handleChange(#newval)"></p-slider>
handleChange(val) {
    //val is the new value
}

Styling

Following is the list of structural style classes, for theming classes visit theming page.

Name Element
ui-slider Container element
ui-slider-handle Handle element

Dependencies

jQuery UI Slider.

<h3 class="first">Basic: {{val1}}</h3>
<p-slider [(value)]="val1" style="width:200px"></p-slider>

<h3>Input: {{val2}}</h3>
<input type="text" pInputText [(ngModel)]="val2" style="width:200px"/>
<p-slider [(value)]="val2" style="width:200px"></p-slider>

<h3>Animate: {{val3}}</h3>
<p-slider [(value)]="val3" style="width:200px" [animate]="true"></p-slider>

<h3>Step: {{val4}}</h3>
<p-slider [(value)]="val4" style="width:200px" [step]="10"></p-slider>

<h3>Range: {{rangeValues}}</h3>
<p-slider [(values)]="rangeValues" style="width:200px" [range]="true"></p-slider>

<h3>Vertical: {{val5}}</h3>
<p-slider [(value)]="val5" style="height:200px" orientation="vertical"></p-slider>
export class SliderDemo {

    val1: number;

    val2: number = 50;

    val3: number;

    val4: number;

    val5: number;

    rangeValues: number[] = [20,80];
}