8.0k New

Slider

Previous Next

An input where the user selects a value from within a given range.

Docs API Reference

Epicenter

Local-first, open source apps

Special Sponsor 
<script lang="ts">
  import { Slider } from "$lib/components/ui/slider/index.js";
 
  let value = $state(75);
</script>
 
<Slider
  type="single"
  bind:value
  max={100}
  step={1}
  class="mx-auto w-full max-w-xs"
/>

Installation 

pnpm dlx shadcn-svelte@latest add slider

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} />

Range

Use type="multiple" with an array of two values for a range slider.

<script lang="ts">
  import { Slider } from "$lib/components/ui/slider/index.js";
 
  let value = $state([25, 50]);
</script>
 
<Slider
  type="multiple"
  bind:value
  max={100}
  step={5}
  class="mx-auto w-full max-w-xs"
/>

Multiple Thumbs

Use an array with multiple values for multiple thumbs.

<script lang="ts">
  import { Slider } from "$lib/components/ui/slider/index.js";
 
  let value = $state([10, 20, 70]);
</script>
 
<Slider
  type="multiple"
  bind:value
  max={100}
  step={10}
  class="mx-auto w-full max-w-xs"
/>

Vertical

Use orientation="vertical" for a vertical slider.

<script lang="ts">
  import { Slider } from "$lib/components/ui/slider/index.js";
 
  let first = $state(50);
  let second = $state(25);
</script>
 
<div class="mx-auto flex w-full max-w-xs items-center justify-center gap-6">
  <Slider
    type="single"
    bind:value={first}
    max={100}
    step={1}
    orientation="vertical"
    class="h-40"
  />
  <Slider
    type="single"
    bind:value={second}
    max={100}
    step={1}
    orientation="vertical"
    class="h-40"
  />
</div>

Controlled

0.3, 0.7
<script lang="ts">
  import { Label } from "$lib/components/ui/label/index.js";
  import { Slider } from "$lib/components/ui/slider/index.js";
 
  let value = $state([0.3, 0.7]);
</script>
 
<div class="mx-auto grid w-full max-w-xs gap-3">
  <div class="flex items-center justify-between gap-2">
    <Label for="slider-demo-temperature">Temperature</Label>
    <span class="text-sm text-muted-foreground">{value.join(", ")}</span>
  </div>
  <Slider
    type="multiple"
    id="slider-demo-temperature"
    bind:value
    min={0}
    max={1}
    step={0.1}
  />
</div>

Disabled

Use the disabled prop to disable the slider.

<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}
  disabled
  class="mx-auto w-full max-w-xs"
/>