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

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

Input #

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" />

Step #

Size of each movement is defined with the step property.


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

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

Filter #

Image filter implementation using multiple sliders.

Contrast

Brightness

Sepia


<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" />

Vertical #

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


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

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


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

<p-slider ariaLabel="Number" />

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.

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	"vertical" \| "horizontal"	horizontal	Orientation of the slider.
step	number	null	Step factor to increment/decrement the value.
range	boolean	false	When specified, allows two boundary values to be picked.
style	Object	null	Inline style of the component.
styleClass	string	null	Style class of the component.
ariaLabel	string	null	Defines a string that labels the input for accessibility.
ariaLabelledBy	string	null	Establishes relationships between the component and label(s) where its value should be one or more element IDs.
tabindex	number	0	Index of the element in tabbing order.
autofocus	boolean	false	When present, it specifies that the component should automatically get focus on load.

name	parameters	description
onChange	event : SliderChangeEvent	Callback to invoke on value change.
onSlideEnd	event : SliderSlideEndEvent	Callback to invoke when slide ended.

name	type	description
event	Event	Browser event.
values	number[]	New values.
value	number	New value.

name	type	description
originalEvent	Event	Original event
value	number	New value.
values	number[]	New values.

class	description
p-slider	Class name of the root element
p-slider-range	Class name of the range element
p-slider-handle	Class name of the handle element

Slider

Import #

Basic #

Reactive Forms #

Input #

Step #

Range #

Filter #

Vertical #

Accessibility #

Screen Reader

Keyboard Support

Slider API

Slider #

Properties #

Emitters #

Events #

SliderChangeEvent #

SliderSlideEndEvent #

Slider Theming

CSS Classes #

Slider Design Tokens #

Built-in Presets #

token	variable	description
slider.transition.duration	--p-slider-transition-duration	Transition duration of root
slider.track.background	--p-slider-track-background	Background of track
slider.track.border.radius	--p-slider-track-border-radius	Border radius of track
slider.track.size	--p-slider-track-size	Size of track
slider.range.background	--p-slider-range-background	Background of range
slider.handle.width	--p-slider-handle-width	Width of handle
slider.handle.height	--p-slider-handle-height	Height of handle
slider.handle.border.radius	--p-slider-handle-border-radius	Border radius of handle
slider.handle.background	--p-slider-handle-background	Background of handle
slider.handle.hover.background	--p-slider-handle-hover-background	Hover background of handle
slider.handle.content.border.radius	--p-slider-handle-content-border-radius	Content border radius of handle
slider.handle.content.background	--p-slider-handle-content-background	Background of handle
slider.handle.content.hover.background	--p-slider-handle-content-hover-background	Content hover background of handle
slider.handle.content.width	--p-slider-handle-content-width	Content width of handle
slider.handle.content.height	--p-slider-handle-content-height	Content height of handle
slider.handle.content.shadow	--p-slider-handle-content-shadow	Content shadow of handle
slider.handle.focus.ring.width	--p-slider-handle-focus-ring-width	Focus ring width of handle
slider.handle.focus.ring.style	--p-slider-handle-focus-ring-style	Focus ring style of handle
slider.handle.focus.ring.color	--p-slider-handle-focus-ring-color	Focus ring color of handle
slider.handle.focus.ring.offset	--p-slider-handle-focus-ring-offset	Focus ring offset of handle
slider.handle.focus.ring.shadow	--p-slider-handle-focus-ring-shadow	Focus ring shadow of handle

Preset	Implementation	Types
Aura	Aura	Aura
Lara	Lara	Lara
Nora	Nora	Nora
Material	Material	Material