Slider

An elegant range input featuring physical motion feedback. Sliders squeeze and stretch dynamically in proportion to mouse velocity and wobble with organic jelly-inertia when colliding with boundaries.

Horizontal Range 45%

Vertical Range

60%

Configuration

Minimum value (0)

Maximum value (100)

Reset Bounds Revert back to 0-100 defaults

Installation

npx shadcn-svelte@latest add https://ui.grgurevic.click/r/slider.json

Svelte Composition Code

<script lang="ts">
	let value = $state(45);
	import { Slider } from "$lib/components/ui/slider";
</script>

<Slider bind:value={value} />

API & Props Reference

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.