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

import { Slider } from 'primereact/slider';

Slider is used as a controlled input with value and onChange properties.

<Slider value={value} onChange={(e) => setValue(e.value)} />

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

<InputText value={value} onChange={(e) => setValue(} />
<Slider value={value} onChange={(e) => setValue(e.value)} />

Size of each movement is defined with the step property.

<Slider value={value} onChange={(e) => setValue(e.value)} step={20} />

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.

<Slider value={value} onChange={(e) => setValue(e.value)} range />

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

<Slider value={value} onChange={(e) => setValue(e.value)} orientation="vertical" />

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

p-sliderContainer element
p-slider-handleHandle element.
Accessibility guide documents the specification of this component based on WCAG guidelines, the implementation is in progress.

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 usingaria-labelledby and aria-label props.

<span id="label_number">Number</span>
<Slider aria-labelledby="label_number" />

<Slider aria-label="Number" />

Keyboard Support

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.