On This Page

Slider

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

View shadcn-svelte docs Component source

<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@latest add https://neobrutalism-svelte.flenze.com/r/slider.json

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