DEV Community

Cover image for React Slider

React Slider

primetek profile image PrimeTek ・1 min read

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


Refer to PrimeReact setup documentation for download and installation steps for your environment.


import { Slider } from 'primereact/slider';
Enter fullscreen mode Exit fullscreen mode

Getting Started

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

<Slider value={value} onChange={(e) => setValue(e.value)} />
Enter fullscreen mode Exit fullscreen mode


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 />
Enter fullscreen mode Exit fullscreen mode


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

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


Slider supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.


Visit the PrimeReact Slider showcase for demos and documentation.

Discussion (0)

Editor guide