Slider
An input where the user selects a value from within a given range.
Loading preview…
1<script lang="ts">
2 import { Slider } from './index.js';
3
4 let value = $state(50);
5</script>
6
7<Slider type="single" bind:value max={100} step={1} class="max-w-[70%]" />
8Installation
1. Install dependencies
2. Copy these files into your project
- ~/components/slider/slider.svelte
- ~/components/slider/index.ts
Usage
Use slider for continuous or stepped range selection. Set type="single" and bind value. Pass max, step, and optionally orientation="vertical".
1<script lang="ts">
2 import { Slider } from '~/components/slider';
3
4 let value = $state(33);
5</script>
6
7<Slider type="single" bind:value max={100} step={1} />