Browse components
Wake Slider
A range slider whose thumb drags a glowing wake behind it and squashes when flicked fast. Built on a native range input, so keyboard and forms just work.
Installation
npx shadcn@latest add @glint-ui/wake-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/wake-slider.json
Usage
import { WakeSlider } from "@/components/ui/wake-slider";
<WakeSlider label="Volume" value={volume} onChange={setVolume} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | "Volume" | Visible label. |
| defaultValue | number | 40 | Starting value (uncontrolled). |
| min | number | 0 | Minimum. |
| max | number | 100 | Maximum. |
| step | number | 1 | Step size. |
| color | string | "#38bdf8" | Wake and thumb color. |
| trail | number | 0.6 | How long the wake lingers behind the thumb. |
| showValue | boolean | true | Show the current value. |
| disabled | boolean | false | Disable the slider. |
| value | ReactNode | — | Controlled value; pair with onChange(value). |
| className | string | — | Extra classes for the root element. |