Navigation: [/sitemap.md](/sitemap.md)

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

```astro live props={{ name: 'slider' }}
---
import { Slider } from "@/components/ui/slider"
---

<Slider
  defaultValue={33}
  max={100}
  step={1}
  thumbAlignment="edge"
  class="w-full max-w-md"
/>
```

## Installation

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

## Usage

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

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

## Examples

### Range

Use an array with two values for a range slider.

```astro live
---
import { Slider } from "@/components/ui/slider"
---

<Slider
  defaultValue={[25, 75]}
  max={100}
  step={1}
  thumbAlignment="edge"
  class="w-full max-w-md"
/>
```

### Vertical

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

```astro live
---
import { Slider } from "@/components/ui/slider"
---

<div class="flex h-48 items-center">
  <Slider
    orientation="vertical"
    defaultValue={60}
    max={100}
    step={5}
    thumbAlignment="edge"
    class="h-full"
  />
</div>
```

### Disabled

Use the `disabled` prop to disable the slider.

```astro live
---
import { Slider } from "@/components/ui/slider"
---

<Slider
  defaultValue={50}
  disabled
  thumbAlignment="edge"
  class="w-full max-w-md"
/>
```

## API Reference

See the [GitHub source code](https://github.com/fulldotdev/ui/tree/main/src/components/ui/slider) for more information on props.
See the [data-slot docs](https://github.com/bejamas/data-slot/blob/main/packages/slider/README.md) for more information on interactivity.