Components
Glass Slider
Range slider — the handle lifts into a glass lens while dragging, then snaps back to a solid white platter on release.
42
Install
npx shadcn@latest add https://websiteglass.com/r/glass-slider.jsonUsage
import { GlassSlider } from '@/components/ui/glass-slider';
// Uncontrolled
<GlassSlider defaultValue={38} ariaLabel="Volume" />
// Controlled
<GlassSlider
value={volume}
onValueChange={setVolume}
min={0}
max={100}
step={1}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | — | Controlled value. |
defaultValue | number | 50 | Initial value when uncontrolled. |
min | number | 0 | Minimum value. |
max | number | 100 | Maximum value. |
step | number | 1 | Step increment. |
onValueChange | (v: number) => void | — | Fires on every change. |
ariaLabel | string | "Slider" | Accessible label. |
Interaction
On pointerdown the thumb widens, grows taller, and the solid platter fades out, revealing the glass lens. The fill value remains readable through the glass. On release, the thumb springs back and snaps to the nearest step value. Rubber-band overdrag past both ends.