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%]" />

Installation

pnpm dlx shadcn-svelte@latest add slider

npx shadcn-svelte@latest add slider

bun x shadcn-svelte@latest add slider

npx shadcn-svelte@latest add slider

Install bits-ui:

pnpm i bits-ui -D

npm i bits-ui -D

bun install bits-ui -D

yarn install 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(50);
</script>
 
<Slider type="single" orientation="vertical" bind:value max={100} step={1} />

Skeleton Sonner