Slider

Pick a value or a range. The track thickens and the thumb grows while you drag.

Playground

Tweak the props, the preview and the code follow.

Props

thumbs

step1

orientation

showTooltip

disabled

<Slider defaultValue={[50]} showTooltip />

npx @plumsydev/plum-ui add slider

Also pulls in label automatically.

import { Slider } from "@/components/ui/slider"

<Slider defaultValue={[50]} max={100} step={1} />

showTooltip floats the formatted value above the thumb while dragging.

Pass two values for a range.

Price range$20 – $80

Extends Radix Slider.Root.

Prop	Type	Default
`value` Controlled values, one per thumb.	`number[]`	`—`
`defaultValue` Uncontrolled initial values.	`number[]`	`[min]`
`onValueChange` Called while dragging.	`(value: number[]) => void`	`—`
`min / max / step` Range and granularity.	`number`	`0 / 100 / 1`
`showTooltip` Show the value above the thumb while dragging.	`boolean`	`false`
`formatValue` Format the tooltip value.	`(value: number) => ReactNode`	`—`
`orientation` Layout direction.	`"horizontal" \| "vertical"`	`"horizontal"`