Slider

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

Installation


pnpm dlx shadcn@latest add @force-ui-svelte/slider

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

Use an array with two values for a range slider.

Use an array with multiple values for multiple thumbs.

Use orientation="vertical" for a vertical slider.

Use the disabled prop to disable the slider.

To enable RTL support in Force UI, see the RTL configuration guide.

See the Radix UI Slider documentation.

On This Page

Deploy your shadcn/ui app on Vercel

Trusted by OpenAI, Sonos, Adobe, and more.

Vercel provides tools and infrastructure to deploy apps and features at scale.