Slider

Pick a value or a range on a track that follows your finger.

$npx shadcn@latest add @silicon-ui/slider

sliderrangeinput

Installation

$npx shadcn@latest add @silicon-ui/slider

Install the dependencies.
$npm install motion
Copy these files into your project. Shared files are skipped if you already have them.
- components/silicon-ui/slider/slider.tsx
- components/silicon-ui/slider/slider.module.css
Install the foundation once per app for the design and motion tokens: $npx shadcn@latest add @silicon-ui/silicon-foundation

Source codetsx

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

Prop	Type	Default
`label*` Visible label. Range thumbs are named from it unless `thumbLabels` says otherwise.	`string`	—
`value` A number for one thumb, a pair for a range.	`T`	—
`defaultValue`	`T`	—
`onValueChange`	`(value: T) => void`	—
`onValueCommit` Runs once a drag is released or a key changes the value, for work too heavy for every step.	`(value: T) => void`	—
`min`	`number`	`0`
`max`	`number`	`100`
`step`	`number`	`1`
`largeStep` PageUp, PageDown, and Shift with an arrow move this far. Defaults to a tenth of the range.	`number`	—
`marks` Ticks on the track. A number draws a tick; a mark with a label also prints it under the track, and clicking it moves there.	`(number \| SliderMark)[]`	—
`minStepsBetweenThumbs` The closest two range thumbs may sit, in steps.	`number`	`0`
`format` Formats the readout, the bubble, and the spoken value.	`(value: number) => string`	—
`showValue` Show the value beside the label. The bubble over the thumb still appears while dragging or focused.	`boolean`	`true`
`thumbLabels` Accessible names for the two range thumbs.	`[string, string]`	—
`start` Content beside the track, such as an icon or a mute button.	`ReactNode`	—
`end`	`ReactNode`	—
`name` Submits the value with a form, one hidden input per thumb.	`string`	—
`disabled`	`boolean`	—
`className`	`string`	—