import {Slider} from 'primeng/primeng';
Slider is defined using p-slider element and requires a value binding.
<p-slider [(value)]="val"></p-slider>
export class MyModel {
val: number;
}
Boundaries are specified with min and max attributes.
<p-slider [(value)]="val" [min]="0" [max]="100"></p-slider>
Step factor is 1 by default and can be customized with step option.
<p-slider [(value)]="val" [step]="10"></p-slider>
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[];
}
Sliders supports two orientations, horizontal is the default and other alternative is vertical.
<p-slider [(value)]="val" orientation="vertical"></p-slider>
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. |
Name | Parameters | Description |
---|---|---|
onChange |
event.originalEvent: Slide event event.value: New value event.values: Values in range mode |
Callback to invoke on value change via slide. |
<p-slider [(value)]="val" (onChange)="handleChange($event)"></p-slider>
handleChange(e) {
//e.value is the new value
}
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 |
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];
}