Elastic slider

A slider that stretches like rubber past its ends, with a swaying value tag and detents the thumb clicks into.

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

inputsnew

Installation

$npx shadcn@latest add @silicon-ui/elastic-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/elastic-slider/elastic-slider.tsx
- components/silicon-ui/elastic-slider/elastic-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 { ElasticSlider } from "@/components/silicon-ui/elastic-slider/elastic-slider";

Prop	Type	Default
`label*` Visible label; it also names the thumb.	`string`	—
`value`	`number`	—
`defaultValue`	`number`	—
`onValueChange`	`(value: number) => void`	—
`onValueCommit` Runs once a drag is released or a key changes the value.	`(value: number) => 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` Detents. A dragged thumb clicks into each one and holds for a few pixels before letting go. Labels print under the track.	`(number \| ElasticSliderMark)[]`	—
`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 using keys.	`boolean`	`true`
`startIcon` Icons at either end. The one on the side being pulled past its limit is pushed outward with the track.	`ReactNode`	—
`endIcon`	`ReactNode`	—
`name` Submits the value with a form.	`string`	—
`disabled`	`boolean`	—
`className`	`string`	—