Slider

Pick a value, or a range with two thumbs, on a horizontal track. Values snap to step; the track follows dir="rtl".

Volume

40%

const [value, setValue] = useState([40]);

<span id="volume">Volume</span>
<Slider aria-labelledby="volume" value={value} onValueChange={setValue} />

Import

import { Slider } from "@meridui/react";

Examples

Range

Pass two values. Thumbs cannot cross; minStepsBetweenThumbs keeps them apart. Name each thumb with thumbLabels and give values a readable form with getValueText.

Price

$200 – $800

<Slider
value={value}
onValueChange={setValue}
min={0}
max={1000}
step={10}
minStepsBetweenThumbs={5}
thumbLabels={["Minimum price", "Maximum price"]}
getValueText={(v) => "$" + v}
name="price"
/>

Decimal steps, disabled and RTL

<Slider aria-label="Opacity" defaultValue={[0.5]} min={0} max={1} step={0.05} />
<Slider aria-label="Disabled" defaultValue={[30]} disabled />
<div dir="rtl">
<Slider aria-label="RTL" defaultValue={[25]} />
</div>

API reference

Renders a div; other div attributes and the ref go on it. For a single thumb, aria-label / aria-labelledby on the root name the thumb.

Prop	Type	Default	Description
`value`	`number[]`	–	Controlled values: one for a single slider, two for a range.
`defaultValue`	`number[]`	`[min]`	Initial values when uncontrolled.
`onValueChange`	`(value: number[]) => void`	–	Called on every change while dragging or pressing keys.
`onValueCommit`	`(value: number[]) => void`	–	Called when a drag ends or after a key press.
`min`	`number`	`0`	Lowest value.
`max`	`number`	`100`	Highest value.
`step`	`number`	`1`	Increment.
`largeStep`	`number`	`step * 10`	Increment for Page Up / Page Down and Shift + arrows.
`minStepsBetweenThumbs`	`number`	`0`	Minimum distance between range thumbs, in steps.
`thumbLabels`	`string[]`	`["Minimum", "Maximum"] for a range`	Accessible name of each thumb.
`getValueText`	`(value: number, index: number) => string`	–	aria-valuetext, e.g. with a unit or currency.
`disabled`	`boolean`	`false`	Disables the slider.
`name`	`string`	–	Hidden input per thumb: name for one thumb, name[] for a range.

Styling

Class	Element
`.mrd-slider`	Root (`data-disabled`)
`.mrd-slider__track`	Track, and the pointer target
`.mrd-slider__range`	Filled part of the track
`.mrd-slider__thumb`	Thumb, `role="slider"`

Each thumb is a role="slider" with aria-valuenow, aria-valuemin and aria-valuemax. In a range, the limits of each thumb are the other thumb's value, so screen readers report the real bounds. The track has a 24px hit area and each thumb a 24px target (44px on coarse pointers).

Key	Action
`ArrowRightArrowUp`	Increase by step (ArrowRight decreases in RTL).
`ArrowLeftArrowDown`	Decrease by step (ArrowLeft increases in RTL).
`PageUpPageDown`	Increase / decrease by largeStep. Shift + arrows do the same.
`HomeEnd`	Set to the minimum / maximum.

NumberInput — when the exact number matters.