Foundations
IntroductionSlider
An elegant range input featuring physical motion, jelly-like wobbles, and elastic animations.
bunx shadcn-svelte@latest add https://ui.grgurevic.click/r/slider.jsonUsage
Horizontal and vertical orientation layout presets.
45%
60%
Best practices
The best practices when using range sliders.
- Add numeric labels next to sliders to display the active value. For precision entry, pair with an
Input field that syncs to the same state. - Set logical min and max limits that fit the input domain context.
- Enable the vertical orientation only when horizontal space is constrained.
- Avoid nesting multiple sliders too closely to prevent accidental dual drags.
Props
The props available for the Slider component.
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | number[] | 0 | Two-way bindable active value representing the track percentage. |
| orientation | "horizontal" | "vertical" | "horizontal" | Aligns track layout and slide dragging boundaries. |
| min | number | 0 | Minimum boundary threshold. |
| max | number | 100 | Maximum boundary threshold. |
| liquidGlass | boolean | false | Enables physical liquid glass refraction (Chromium only). |
| refractiveIndex | number | 1.5 | IOR of glass curvature. Range 1.0 (air) to 2.4. |
| bezelWidth | number | 8 | Depth of bezel refraction zone (px). |
| displacementScale | number | 25 | Intensity of physical refraction offset. |