Browse components
Elastic Slider
Range slider whose track stretches like rubber when dragged past either end, then springs back. Keyboard accessible.
Installation
npx shadcn@latest add @glint-ui/elastic-sliderFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/elastic-slider.json
Usage
import { ElasticSlider } from "@/components/ui/elastic-slider";
<ElasticSlider defaultValue={50} max={100} leftIcon={<Volume />} rightIcon={<Volume2 />} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| defaultValue | number | 50 | Starting value. |
| min | number | 0 | Lowest value. |
| max | number | 100 | Highest value. |
| step | number | 1 | Value increment. |
| stretch | number | 28 | Max px the track stretches past an end. |
| showValue | boolean | true | Show the value under the track. |
| label | string | "Volume" | Accessible name. |
| leftIcon | ReactNode | — | Icon at the low end. |
| rightIcon | ReactNode | — | Icon at the high end. |
| onValueChange | ReactNode | — | Called with the new value. |
| className | string | — | Extra classes for the root element. |