Slider

Slider is a component to provide input with a drag handle.

Import #


import { SliderModule } from 'primeng/slider';

Basic #

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



<p-slider [(ngModel)]="value"></p-slider>

Reactive Forms #

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>

Input #

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>

Step #

Size of each movement is defined with the step property.



<p-slider [(ngModel)]="value" [step]="20"></p-slider>

Range #

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>

Vertical #

Default layout of slider is horizontal, use orientation property for the alternative vertical mode.



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

Style #

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

Accessibility guide documents the specification of this component based on WCAG guidelines, the implementation is in progress.

Accessibility #

Screen Reader

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>

Keyboard Support

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.

Slider API

API defines helper props, events and others for the PrimeNG Slider module.

Properties #

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 specified, allows two boundary values to be picked.
style	string	null	Inline style of the component.
styleClass	string	null	Style class of the component.
tabindex	number	0	Index of the element in tabbing order.
ariaLabelledBy	string	null	Establishes relationships between the component and label(s) where its value should be one or more element IDs.

Events #

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: Mouseup event event.value: New value	Callback to invoke when slide stops.