Slider

FREE

Slider with single or range values, value bubbles, steps and labelled marks.

Playground

Change the props and watch the component and its code update live.

Props

Range

Min

Max

Step

Value bubble

Value suffix

Marks

Primary color

Disabled

Code

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

<Slider
  defaultValue={[40]}
  showValue="active"
/>

Terminal

npx @bloxa/cli add slider
# or: npx shadcn@latest add @bloxa/slider

Packages installed automatically: radix-ui

Every component also accepts the props of the element it renders.

Prop	Type	Default	Description
value / defaultValue	number[]	—	Two values make it a range.
min / max / step	number	0 / 100 / 1	Bounds and step.
showValue	"always" \| "active" \| false	false	Value bubble above the thumb.
formatValue	(value: number) => string	—	Formats the bubble text.
marks	{ value, label? }[]	—	Marks along the track.
thumbLabels	string[]	—	Accessible name per thumb.