Slider is a component to provide input with a drag handle.
import { SliderModule } from 'primeng/slider';
Two-way binding is defined using the standard ngModel directive.
<p-slider [(ngModel)]="value"></p-slider>
Slider can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.
<form [formGroup]="formGroup">
<p-slider formControlName="value"></p-slider>
</form>
Slider is connected to an input field using two-way binding.
<div>
<input type="text" pInputText [(ngModel)]="value" class="w-full"/>
<p-slider [(ngModel)]="value" class="w-full"></p-slider>
</div>
Size of each movement is defined with the step property.
<p-slider [(ngModel)]="value" [step]="20"></p-slider>
When range property is present, slider provides two handles to define two values. In range mode, value should be an array instead of a single value.
<p-slider [(ngModel)]="rangeValues" [range]="true"></p-slider>
Default layout of slider is horizontal, use orientation property for the alternative vertical mode.
<p-slider [(ngModel)]="value" orientation="vertical"></p-slider>
Following is the list of structural style classes, for theming classes visit theming page.
| Name | Element |
|---|---|
| p-slider | Container element |
| p-slider-handle | Handle element |
Slider element component uses slider role on the handle in addition to the aria-orientation, aria-valuemin, aria-valuemax and aria-valuenow attributes. Value to describe the component can be defined using aria-labelledby and aria-label props.
<span id="label_number">Number</span>
<p-slider aria-labelledby="label_number"></p-slider>
<p-slider aria-label="Number"></p-slider>
| Key | Function |
|---|---|
| tab | Moves focus to the slider. |
| left arrowup arrow | Decrements the value. |
| right arrowdown arrow | Increments the value. |
| home | Set the minimum value. |
| end | Set the maximum value. |
| page up | Increments the value by 10 steps. |
| page down | Decrements the value by 10 steps. |
API defines helper props, events and others for the PrimeNG Slider module.
Slider is a component to provide input with a drag handle.
Defines the input properties of the component.
Defines emit that determine the behavior of the component based on a given condition or report the actions that the component takes.
| name | parameters | description | |
|---|---|---|---|
| onChange | event : SliderChangeEvent | Callback to invoke on value change. | |
| onSlideEnd | event : SliderSlideEndEvent | Callback to invoke when slide ended. |
Defines the custom events used by the component's emitters.
Custom change event.
Custom slide end event.