Source: https://primereact.org/slider/

Introducing PrimeReact v11 Alpha 🥁Learn More

• SearchK

• 10.9.7

  • v11(11.0.0)

  • v10(10.9.7)

  • v9(9.6.3)

• FEATURES

• API

• THEMING

• PASS THROUGH

Slider

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

Import#

---

import { Slider } from 'primereact/slider';
         

Copy

Basic#

---

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

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

Copy

Input#

---

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)} />
         

Copy

Step#

---

Size of each movement is defined with the step property.

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

Copy

Range#

---

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 />
         

Copy

Filter#

---

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

Contrast

Brightness

Sepia

<img alt="user header" className="w-full md:w-20rem border-round mb-4" src="https://primefaces.org/cdn/primevue/images/card-vue.jpg" style={filterStyle()} />
<SelectButton value={filter} onChange={(e) => setFilter(e.value)} options={filterOptions} className="mb-3" />
<Slider
    value={filterValues[filter]}
    onChange={(e) => {
        const newFilterValues = [...filterValues];
        newFilterValues[filter] = e.value;
        setFilterValues(newFilterValues);
    }}
    className="w-14rem"
    min={0}
    max={200}
/>
         

Copy

Vertical#

---

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

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

Copy

Accessibility#

---

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 using_aria-labelledby_ and aria-label props.

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

<Slider aria-label="Number" />
     

Copy

Keyboard Support

| Key | Function | | --- | --- | | tab | Moves focus to the slider. | | left arrow__up arrow | Decrements the value. | | right arrow__down 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. |

• Import

• Basic

• Input

• Step

• Range

• Filter

• Vertical

• Accessibility

PrimeReact 10.9.7 by PrimeTek