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(e.target.value)} />
<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.
| Name | Element |
|---|---|
| p-slider | Container element |
| p-slider-handle | Handle element. |
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" />
| 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. |