DEV Community

loading...
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.

Setup

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

Import

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

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

Orientation

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

Theming

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

Resources

Visit the PrimeReact Slider showcase for demos and documentation.

Discussion (0)

pic
Editor guide