# Slider: Vertical

> With `orientation="vertical"` the slider fills its parent's height, and Up raises the value.

Example: https://hextaui.com/docs/slider/examples/vertical
Component docs: https://hextaui.com/docs/slider.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/slider-vertical.json
```

This adds `components/examples/slider/vertical.tsx` with the Slider component and the HextaUI theme tokens.

## Source

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

const bands = [
  { label: "60 Hz", value: 70 },
  { label: "250 Hz", value: 45 },
  { label: "1 kHz", value: 55 },
  { label: "4 kHz", value: 80 },
  { label: "16 kHz", value: 35 },
]

export function SliderVertical() {
  return (
    <div className="flex h-48 gap-6">
      {bands.map((band) => (
        <div key={band.label} className="flex flex-col items-center gap-3">
          <Slider
            orientation="vertical"
            defaultValue={band.value}
            aria-label={band.label}
          />
          <span className="text-xs text-muted-foreground tabular-nums">
            {band.label}
          </span>
        </div>
      ))}
    </div>
  )
}
```

## Props in this example

### Slider

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `defaultValue` | `number \| number[]` | – |  |
| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` |  |
| `aria-label` | `string` | – | Names the thumbs. |

## More Slider examples

- [Sizes](https://hextaui.com/docs/slider/examples/sizes.md)
- [Range](https://hextaui.com/docs/slider/examples/range.md)
- [Value bubble](https://hextaui.com/docs/slider/examples/value-bubble.md)
- [Steps and format](https://hextaui.com/docs/slider/examples/steps.md)
- [Controlled](https://hextaui.com/docs/slider/examples/controlled.md)
- [With icons](https://hextaui.com/docs/slider/examples/icons.md)
- [Disabled](https://hextaui.com/docs/slider/examples/disabled.md)
- [Long labels](https://hextaui.com/docs/slider/examples/long-label.md)
- [Right to left](https://hextaui.com/docs/slider/examples/rtl.md)