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

Slider - 图1

Documentation

Import

  2. import {SliderModule} from 'primeng/slider';
  3.  

Getting Started

Two-way binding is defined using the standard ngModel directive.

  2. <p-slider [(ngModel)]="val"></p-slider>
  3.  
  2. export class MyModel {
  4.     val: number;
  6. }
  7.  

Model Driven Forms

Slider can be used in a model driven form as well.

  2. <p-slider formControlName="age"></p-slider>
  3.  

Min-Max

Boundaries are specified with min and max attributes.

  2. <p-slider [(ngModel)]="val" [min]="0" [max]="100"></p-slider>
  3.  

Step

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

  2. <p-slider [(ngModel)]="val" [step]="10"></p-slider>
  3.  

Range

Range slider provides two handles to define two values. In this case, value binding should refer to an array.

  2. <p-slider [(ngModel)]="rangeValues" [range]="true"></p-slider>
  3.  
  2. export class MyModel {
  4.     rangeValues: number[];
  6. }
  7.  

Orientation

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

  2. <p-slider [(ngModel)]="val" orientation="vertical"></p-slider>
  3.  

Properties

NameTypeDefaultDescription
animatebooleanfalseWhen enabled, displays an animation on click of the slider bar.
disabledbooleanfalseWhen present, it specifies that the element should be disabled.
minnumber0Mininum boundary value.
maxnumber100Maximum boundary value.
orientationstringhorizontalOrientation of the slider, valid values are horizontal and vertical.
stepnumber1Step factor to increment/decrement the value.
rangebooleanfalseWhen speficed, allows two boundary values to be picked.
stylestringnullInline style of the component.
styleClassstringnullStyle class of the component.

Events

NameParametersDescription
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: Mouseup event event.value: New value Callback to invoke when slide stops.
  2. <p-slider [(ngModel)]="val" (onChange)="handleChange($event)"></p-slider>
  3.  
  2. handleChange(e) {
  3.     //e.value is the new value
  4. }
  5.  

Styling

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

NameElement
ui-sliderContainer element
ui-slider-handleHandle element

Dependencies

None.

Source

View on GitHub

  2. <h3 class="first">Basic: {{val1}}</h3>
  3. <p-slider [(ngModel)]="val1" [style]="{'width':'14em'}"></p-slider>
  5. <h3>Input: {{val2}}</h3>
  6. <input type="text" pInputText [(ngModel)]="val2" style="width:14em"/>
  7. <p-slider [(ngModel)]="val2" [style]="{'width':'14em'}"></p-slider>
  9. <h3>Animate: {{val3}}</h3>
  10. <p-slider [(ngModel)]="val3" [style]="{'width':'14em'}" [animate]="true"></p-slider>
  12. <h3>Step: {{val4}}</h3>
  13. <p-slider [(ngModel)]="val4" [style]="{'width':'14em'}" [step]="20"></p-slider>
  15. <h3>Range: {{rangeValues[0] + ' - ' + rangeValues[1]}}</h3>
  16. <p-slider [(ngModel)]="rangeValues" [style]="{'width':'14em'}" [range]="true"></p-slider>
  18. <h3>Vertical: {{val5}}</h3>
  19. <p-slider [(ngModel)]="val5" [style]="{'height':'14em'}" orientation="vertical"></p-slider>
  20.  
  2. export class SliderDemo {
  4.     val1: number;
  6.     val2: number = 50;
  8.     val3: number;
  10.     val4: number;
  12.     val5: number;
  14.     rangeValues: number[] = [20,80];
  15. }
  16.