Browse components
Morph Slider
Range slider whose thumb stretches with drag speed and drips a gooey value bubble while you slide.
Installation
npx shadcn@latest add @glint-ui/morph-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/morph-slider.json
Usage
import { MorphSlider } from "@/components/ui/morph-slider";
<MorphSlider defaultValue={42} suffix="%" onChange={(v) => console.log(v)} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| min | number | 0 | Minimum value. |
| max | number | 100 | Maximum value. |
| step | number | 1 | Value increment. |
| defaultValue | number | 42 | Initial value when uncontrolled. |
| color | string | "#c6ff3d" | Thumb, fill and bubble color. |
| textColor | string | "#0a0a0a" | Value text color inside the bubble. |
| suffix | string | "%" | Text appended to the value. |
| label | string | "Value" | Accessible name. |
| value | ReactNode | — | Controlled value (pair with onChange). |
| onChange | ReactNode | — | (value: number) => void |
| className | string | — | Extra classes for the root element. |