import {Slider} from 'primeng/primeng';
Two-way binding is defined using the standard ngModel directive.
<p-slider [(ngModel)]="val"></p-slider>
export class MyModel {
val: number;
}
Slider can be used in a model driven form as well.
<p-slider formControlName="age"></p-slider>
Boundaries are specified with min and max attributes.
<p-slider [(ngModel)]="val" [min]="0" [max]="100"></p-slider>
Step factor is 1 by default and can be customized with step option.
<p-slider [(ngModel)]="val" [step]="10"></p-slider>
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[];
}
Sliders supports two orientations, horizontal is the default and other alternative is vertical.
<p-slider [(ngModel)]="val" orientation="vertical"></p-slider>
Name | Type | Default | Description |
---|---|---|---|
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. |
onSlidEEnd |
event.originalEvent: Slide event event.value: New value |
Callback to invoke when slide stops. |
<p-slider [(ngModel)]="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 [(ngModel)]="val1" [style]="{'width':'200px'}"></p-slider>
<h3>Input: {{val2}}</h3>
<input type="text" pInputText [(ngModel)]="val2" style="width:190px"/>
<p-slider [(ngModel)]="val2" [style]="{'width':'200px'}"></p-slider>
<h3>Animate: {{val3}}</h3>
<p-slider [(ngModel)]="val3" [style]="{'width':'200px'}" [animate]="true"></p-slider>
<h3>Step: {{val4}}</h3>
<p-slider [(ngModel)]="val4" [style]="{'width':'200px'}" [step]="10"></p-slider>
<h3>Range: {{rangeValues}}</h3>
<p-slider [(ngModel)]="rangeValues" [style]="{'width':'200px'}" [range]="true"></p-slider>
<h3>Vertical: {{val5}}</h3>
<p-slider [(ngModel)]="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];
}