Slider

Slider is a component to provide input using dragging of a handle.


import { Slider } from 'primereact/slider';


<script src="https://unpkg.com/primereact/core/core.min.js"></script>
<script src="https://unpkg.com/primereact/slider/slider.min.js"></script>

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


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

Range slider provides two handles to define two values. Enable range property and bind an array to implement a range slider.


<Slider value={rangeValues} onChange={(e) => setRangeValues(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" />

Any valid attribute is passed to the root element implicitly, extended properties are as follows;

Name	Type	Default	Description
id	string	null	Unique identifier of the element.
value	number	0	Value of the component.
animate	boolean	false	When enabled, displays an animation on click of the slider bar.
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 speficed, allows two boundary values to be picked.
style	string	null	Inline style of the component.
className	string	null	Style class of the element.
disabled	boolean	false	When present, it specifies that the component should be disabled.
tabIndex	number	null	Index of the element in tabbing order.

Name	Parameters	Description
onChange	event.originalEvent: Slide event event.value: New value.	Callback to invoke on value change via slide.
onSlideEnd	event.originalEvent: Slide event event.value: New value.	Callback to invoke when slide ends.