Docs
Slider
Slider
An input where the user selects a value from within a given range.
<script lang="ts">
import { Slider } from "$lib/components/ui/slider/index.js";
let value = $state(50);
</script>
<Slider type="single" bind:value max={100} step={1} class="max-w-[70%]" />
<script lang="ts">
import { Slider } from "$lib/components/ui/slider/index.js";
let value = $state(50);
</script>
<Slider type="single" bind:value max={100} step={1} class="max-w-[70%]" />
Installation
npx shadcn-svelte@next add slider
Install bits-ui:
npm i bits-ui -D
Copy and paste the component source files linked at the top of this page into your project.
Usage
<script lang="ts">
import { Slider } from "$lib/components/ui/slider/index.js";
let value = $state(33);
</script>
<Slider type="single" bind:value max={100} step={1} />
Examples
Multiple Thumbs
<script lang="ts">
import { Slider } from "$lib/components/ui/slider/index.js";
let value = $state([25, 75]);
</script>
<Slider type="multiple" bind:value max={100} step={1} />
<script lang="ts">
import { Slider } from "$lib/components/ui/slider/index.js";
let value = $state([25, 75]);
</script>
<Slider type="multiple" bind:value max={100} step={1} class="max-w-[70%]" />
<script lang="ts">
import { Slider } from "$lib/components/ui/slider/index.js";
let value = $state([25, 75]);
</script>
<Slider type="multiple" bind:value max={100} step={1} class="max-w-[70%]" />
On This Page