Slider

A slider allows a user to select one or more values within a range.

Source

View source code

Issues

Report an issue

Package

@rootui/slider

Reference

React Aria docs

Preview

orientation

step

minValue

maxValue

isDisabled

1<aC />

1<Slider />

Package

Shadcn CLI

Manual

Note

Please ensure your local environment is fully configured as instructed in the getting started guide.

npm

yarn

pnpm

bun

npm install @rootui/slider

1import { slider } from "@rootui/slider";
2
3export default function Page() {
4  return (
5    <Slider />
6  )
7}

See the React Aria documentation for more information.

Prop	Type	Default
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`
The orientation of the Slider.
`minValue`	`Number`	`0`
The slider's minimum value.
`maxValue`	`Number`	`100`
The slider's maximum value.
`step`	`Number`	`1`
The slider's step value.
`thumbContent`	`ReactNode`	`-`
The content to be rendered inside the slider thumb.
`thumbProps`	`SliderThumbProps`	`-`
Props for the slider thumb component.
`trackFillProps`	`SliderTrackFillProps`	`-`
The content to be rendered inside the slider thumb.
`showTooltip`	`Boolean`	`true`
Whether to show a tooltip with the current value when hovering or dragging the thumb.
`tooltipProps`	`ComponentProps<"div"> & Partial<NumberFlowProps>`	`-`
Props for the tooltip that appears when hovering or dragging the thumb. Visit https://number-flow.barvian.me/ for more information on the NumberFlow component.
`isDisabled`	`boolean`	`false`
Whether the slider is disabled.
`value`	`T`	`-`
The current value (controlled).
`defaultValue`	`T`	`-`
The default value (uncontrolled).
`onChange`	`(value: T) => void`	`-`
Handler that is called when the value changes.
`onChangeEnd`	`(value: T) => void`	`-`
Fired when the slider stops moving, due to being let go.
`formatOptions`	`Intl.NumberFormatOptions`	`-`
The display format of the value label.

Attribute	Description
`data-orientation="horizontal \| vertical"`	The orientation of the slider.
`data-disabled`	Whether the slider is disabled.