Slider

Select a value from a range by dragging a handle.

<script lang="ts">
  import { Slider } from "$lib/components/ui/slider";
 
  let value = $state(50);
</script>
 
<Slider type="single" bind:value max={100} step={1} class="max-w-xs" />

Installation

npx lily-svelte@latest add slider

Install the lily base and `utils` (run once per project).

npx lily-svelte@latest init

Copy the slider source from the registry into `$lib/components/ui/slider`.

Usage

<script lang="ts">
	import { Slider } from '$lib/components/ui/slider';
 
	let value = $state(50);
</script>
 
<Slider type="single" bind:value max={100} step={1} />

← Skeleton Sonner →