revido kit
Start building
← All components
forms / stable

Slider

Drag along a 6px track with a cobalt fill; one thumb for a value, two for a range.

LIVE PREVIEW
Loading preview…

When to use

  • Approximate values where position matters more than the exact number (zoom, thresholds, filter ranges).

Consider an alternative

  • Exact amounts, money or hours — use NumberField.

Import

import { Slider } from '@revido-llc/kit';

Keyboard interaction

  • Arrow keys — step
  • Page Up / Page Down — big step
  • Home / End — min / max

Props

Props documented by the Kit. Refer to the TypeScript types for the complete interface, including inherited props.

classNamestring—
defaultValueSliderValue—
disabledboolean—Radix compatibility: prefer `isDisabled`.
labelReactNode—Visible label above the track.
maxnumber100Highest value.
minnumber0Lowest value.
onChange((value: SliderValue) => void)—Called continuously while dragging, with the same shape as `value`.
onChangeEnd((value: SliderValue) => void)—Called when the user lets go.
onValueChange((value: number[]) => void)—Radix compatibility: always receives an array. Prefer `onChange`.
onValueCommit((value: number[]) => void)—Radix compatibility: always receives an array. Prefer `onChangeEnd`.
showValuebooleanfalseShow the formatted value next to the label.
valueSliderValue—A number for one thumb, an array for one thumb per entry (a range).
formatOptionsNumberFormatOptions—The display format of the value label.
renderDOMRenderFunction<"div", SliderRenderProps>—Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components. Requirements: - You must render the expected element type (e.g. if `<button>` is expected, you cannot render an `<a>`). - Only a single root DOM element can be rendered (no fragments). - You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.

Examples

Single value

<Slider label="Confidence" showValue value={value} onChange={setValue} />

Range

Pass an array for one thumb per entry.

<Slider label="Budget" defaultValue={[2000, 8000]} max={10000} step={500}
  formatOptions={{ style: "currency", currency: "EUR" }} showValue />

Disabled

<Slider aria-label="Level" defaultValue={30} isDisabled />

Related components