---
type: doc
title: Slider
description: An input where the user selects a value from within a given range.
---

> Fulldev UI for Astro. The `@fulldev` registry in `components.json` points at `https://ui.full.dev/r/styles/{style}/{name}.json`; see [installation](/astro/docs/installation.md).

```astro title="src/components/examples/slider/slider-demo.astro"
---
import { Slider } from "@/components/ui/slider"
---

<Slider defaultValue={75} max={100} step={1} class="mx-auto w-full max-w-xs" />
```

## Installation

```bash
npx shadcn@latest add @fulldev/slider
```

## Usage

```ts
import { Slider } from "@/components/ui/slider"
```

```astro
<Slider defaultValue={33} max={100} step={1} />
```

A single number renders one thumb, a pair renders a range. Thumbs use
`thumbAlignment="edge"` by default, so they stay within the track at the
minimum and maximum. Use `thumbAlignment="center"` to center them over the
track endpoints.

## Range

Use an array with two values for a range slider.

```astro title="src/components/examples/slider/slider-range.astro"
---
import { Slider } from "@/components/ui/slider"
---

<Slider
  defaultValue={[25, 50]}
  max={100}
  step={5}
  class="mx-auto w-full max-w-xs"
/>
```

## Multiple Thumbs

The official example has three thumbs. The Astro slider supports at most two,
so this example is in the [React Slider](/react/components/slider/) docs only.

## Vertical

Use `orientation="vertical"` for a vertical slider.

```astro title="src/components/examples/slider/slider-vertical.astro"
---
import { Slider } from "@/components/ui/slider"
---

<div class="mx-auto flex w-full max-w-xs items-center justify-center gap-6">
  <Slider
    defaultValue={50}
    max={100}
    step={1}
    orientation="vertical"
    class="h-40"
  />
  <Slider
    defaultValue={25}
    max={100}
    step={1}
    orientation="vertical"
    class="h-40"
  />
</div>
```

## Controlled

Listen to the `slider:change` event on the root to read the value. Dispatch
`slider:set` with `{ value }` to set it.

```astro title="src/components/examples/slider/slider-controlled.astro"
---
import { Label } from "@/components/ui/label"
import { Slider } from "@/components/ui/slider"

const value = [0.3, 0.7]
---

<div class="mx-auto grid w-full max-w-xs gap-3" data-slider-controlled>
  <div class="flex items-center justify-between gap-2">
    <Label data-slider-label>Temperature</Label>
    <span class="text-sm text-muted-foreground" data-slider-value>
      {value.join(", ")}
    </span>
  </div>
  <Slider defaultValue={[value[0], value[1]]} min={0} max={1} step={0.1} />
</div>

<script>
  const initialize = () => {
    for (const root of document.querySelectorAll("[data-slider-controlled]")) {
      if (root.hasAttribute("data-bound")) continue
      root.setAttribute("data-bound", "")
      // Name each thumb after the visible label: the thumbs are the
      // focusable sliders, not the root.
      const name = root
        .querySelector("[data-slider-label]")
        ?.textContent?.trim()
      const thumbs = root.querySelectorAll('[data-slot="slider-thumb"]')
      thumbs.forEach((thumb, index) =>
        thumb.setAttribute(
          "aria-label",
          thumbs.length > 1
            ? `${name} ${index === 0 ? "minimum" : "maximum"}`
            : `${name}`
        )
      )
      const output = root.querySelector("[data-slider-value]")
      root
        .querySelector('[data-slot="slider"]')
        ?.addEventListener("slider:change", (event) => {
          const { value } = (event as CustomEvent<{ value: number | number[] }>)
            .detail
          if (output) output.textContent = [value].flat().join(", ")
        })
    }
  }

  initialize()
  document.addEventListener("astro:page-load", initialize)
</script>
```

## Disabled

Use the `disabled` prop to disable the slider.

```astro title="src/components/examples/slider/slider-disabled.astro"
---
import { Slider } from "@/components/ui/slider"
---

<Slider
  defaultValue={50}
  max={100}
  step={1}
  disabled
  class="mx-auto w-full max-w-xs"
/>
```

## RTL

Set `dir="rtl"` on the slider or a parent element.

```astro title="src/components/examples/slider/slider-rtl.astro"
---
import { Slider } from "@/components/ui/slider"

const translations = {
  en: {
    dir: "ltr",
    values: {},
  },
  ar: {
    dir: "rtl",
    values: {},
  },
  he: {
    dir: "rtl",
    values: {},
  },
} as const

const { dir } = translations.ar
---

<Slider
  defaultValue={75}
  max={100}
  step={1}
  class="mx-auto w-full max-w-xs"
  dir={dir}
/>
```

## API Reference

Source: [`src/components/ui/slider`](https://github.com/fulldotdev/ui/tree/main/src/components/ui/slider)

| Prop             | Type                                       | Default        |
| ---------------- | ------------------------------------------ | -------------- |
| `defaultValue`   | `number \| [number, number]`               | `min`          |
| `min`            | `number`                                   | `0`            |
| `max`            | `number`                                   | `100`          |
| `step`           | `number`                                   | `1`            |
| `largeStep`      | `number`                                   | `step * 10`    |
| `orientation`    | `"horizontal" \| "vertical"`               | `"horizontal"` |
| `thumbAlignment` | `"center" \| "edge" \| "edge-client-only"` | `"edge"`       |
| `disabled`       | `boolean`                                  | `false`        |

See the [data-slot docs](https://github.com/bejamas/data-slot/blob/main/packages/slider/README.md) for events and keyboard behavior.

## Install what this page shows

```bash
npx shadcn@latest add @fulldev/slider-examples
```