Slider

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


import { Slider } from 'primeng/slider';

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


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

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" styleClass="w-56" />
</form>

Slider is connected to an input field using two-way binding.


<input type="text" pInputText [(ngModel)]="value" class="w-full mb-4"/>
<p-slider [(ngModel)]="value" class="w-full" />

Size of each movement is defined with the step property.


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

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" styleClass="w-56" />

Image filter implementation using multiple sliders.

user header

<img alt="user header" class="w-full md:w-80 rounded mb-6" src="https://primefaces.org/cdn/primevue/images/card-vue.jpg" [style]="filterStyle" />
<p-selectbutton [(ngModel)]="filter" [options]="filterOptions" optionLabel="label" optionValue="value" class="mb-4" />
<p-slider [(ngModel)]="filterValues[filter]" class="w-56" [min]="0" [max]="200" />

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


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

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 ariaLabelledBy and ariaLabel props.


<span id="label_number">Number</span>
<p-slider ariaLabelledBy="label_number" />

<p-slider ariaLabel="Number" />

Keyboard Support

KeyFunction
tabMoves focus to the slider.
left arrowup arrowDecrements the value.
right arrowdown arrowIncrements the value.
homeSet the minimum value.
endSet the maximum value.
page upIncrements the value by 10 steps.
page downDecrements the value by 10 steps.