# Slider

A strict, minimalist slider for numerical input.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).



A utilitarian slider. It rejects rounded corners, employing a harsh `rounded-none` geometry across both the track and the thumb, aligned with the Monolith specification.



<ComponentPreview name="slider-demo">
  <div className="flex flex-col space-y-4 py-8 max-w-sm mx-auto w-full">
    <label className="text-sm font-medium leading-none">
      Volume
    </label>

    <Slider defaultValue="[50]" max="100" step="1" />
  </div>
</ComponentPreview>

## Installation [#installation]

```bash
npx shadcn@latest add "https://ui.manpuc.me/r/slider.json"
```

## Usage [#usage]

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

export function SliderDemo() {
  return (
    <Slider defaultValue={[50]} max={100} step={1} />
  )
}
```

## Examples [#examples]

### Range (Multi-Thumb) [#range-multi-thumb]

When multiple values are provided to `defaultValue` or `value`, the slider automatically renders multiple thumbs, making it ideal for range selections like pricing.

<ComponentPreview name="slider-range">
  <div className="flex w-full max-w-sm flex-col space-y-4 py-8 mx-auto">
    <div className="flex items-center justify-between">
      <label className="text-sm font-medium leading-none">
        Price Range
      </label>

      <span className="text-sm text-muted-foreground">
        $25 - $75
      </span>
    </div>

    <Slider defaultValue="[25, 75]" max="100" step="1" />
  </div>
</ComponentPreview>

### Vertical [#vertical]

By passing the `orientation="vertical"` prop, the slider adjusts its tracking dimensions automatically.

<ComponentPreview name="slider-vertical">
  <div className="flex h-[200px] w-full items-center justify-center py-8">
    <Slider defaultValue="[50]" max="100" step="1" orientation="vertical" />
  </div>
</ComponentPreview>

## API Reference [#api-reference]

The `Slider` component uses Radix UI Primitives. For a complete API reference, please refer to the [Radix UI Slider Documentation](https://www.radix-ui.com/docs/primitives/components/slider).

| Prop            | Type                         | Default        | Description                                      |
| --------------- | ---------------------------- | -------------- | ------------------------------------------------ |
| `value`         | `number[]`                   | -              | The controlled value of the slider.              |
| `defaultValue`  | `number[]`                   | -              | The value of the slider when initially rendered. |
| `onValueChange` | `function`                   | -              | Event handler called when the value changes.     |
| `min`           | `number`                     | `0`            | The minimum value for the range.                 |
| `max`           | `number`                     | `100`          | The maximum value for the range.                 |
| `step`          | `number`                     | `1`            | The stepping interval.                           |
| `orientation`   | `"horizontal" \| "vertical"` | `"horizontal"` | The orientation of the slider.                   |