---
title: Slider
description: An input where the user selects a value from within a given range.
icon: sliders-horizontal
author:
  name: shadcn
  url: https://github.com/shadcn
mode: wide
---

<PoweredBy
  packages={[
    { name: 'Base UI', url: 'https://base-ui.com/react/components/slider' },
    { name: 'Shadcn UI', url: 'https://ui.shadcn.com/docs/components/slider' },
  ]}
/>

### Installation

```package-install
npx shadcn@latest add @redpanda/slider
```

<ComponentPreview name="slider-demo" description="Default single-thumb slider with value 0–100." />

### Range

<ComponentPreview name="slider-range-demo" description="Two-thumb range — pass an array of values to select a range." />

### Vertical orientation

<ComponentPreview name="slider-vertical-demo" description="Vertical slider via `orientation='vertical'`." />

### Disabled

<ComponentPreview name="slider-disabled-demo" description="Read-only state — thumb and track are non-interactive." />

### Live value label

<ComponentPreview
  name="slider-with-value-demo"
  description="Slider with a live numeric value label that updates during interaction."
/>

### Custom step increments

<ComponentPreview name="slider-step-demo" description="Slider with custom step increments visualised via tick marks." />

### Formatted value

<ComponentPreview
  name="slider-formatted-value-demo"
  description="Slider rendering a formatted value using Intl.NumberFormat for currency or percent."
/>

### Drag bubble

<ComponentPreview
  name="slider-drag-bubble-demo"
  description="Slider with a floating value bubble that follows the thumb during drag."
/>

### Custom min, max, and step

<ComponentPreview name="slider-custom-range-demo" description="Slider with custom min, max, and step values." />

## When to use

Sliders allow users to select a value from a range. Use this decision tree:

```mermaid
graph TD;
    A[❓ Need numeric input?] --> B{Value from range?};
    A --> C[⚠️ Use other input types];
    B --> D[✅ Use Slider];
    B --> E{Exact value needed?};
    D --> F{Single or range?};
    E --> G[⚠️ Use Number Input];
    F --> H[✅ Single value Slider];
    F --> I[✅ Range Slider];

    classDef recommended fill:#4ade80,stroke:#22c55e,stroke-width:2px,color:#000;
    classDef discouraged fill:#fbbf24,stroke:#f59e0b,stroke-width:2px,color:#000;
    classDef decision fill:#60a5fa,stroke:#3b82f6,stroke-width:2px,color:#fff;
    classDef neutral fill:#9ca3af,stroke:#6b7280,stroke-width:2px,color:#fff;

    class D,H,I recommended;
    class C,G discouraged;
    class A,B,E,F decision;
```

## Usage

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

```tsx
<Slider defaultValue={[33]} max={100} step={1} />
```

## Props

<div className="flex flex-row gap-x-3">
  <ExternalLink href="https://base-ui.com/react/components/slider" text="Docs" />
  <ExternalLink href="https://base-ui.com/react/components/slider#api-reference" text="API Reference" />
</div>

## Keyboard interactions

| Key                       | Action                                                             |
| ------------------------- | ------------------------------------------------------------------ |
| `Tab` to thumb            | Focus lands on the thumb. Range sliders have one thumb per value.  |
| `ArrowLeft` / `ArrowDown` | Decreases value by one step.                                       |
| `ArrowRight` / `ArrowUp`  | Increases value by one step.                                       |
| `PageDown` / `PageUp`     | Decreases / increases by a larger step (roughly 10% of the range). |
| `Home` / `End`            | Jumps to `min` / `max`.                                            |

## Accessibility

- Each thumb exposes `role="slider"` with `aria-valuemin`, `aria-valuemax`, and `aria-valuenow`. Always provide a
  programmatic label (`<Label>` + `aria-labelledby`, or `aria-label`) describing what the value represents.
- Pair the slider with a visible numeric value where precision matters — sliders alone are hard to read for
  screen-reader and low-vision users.
- `onValueChange` receives `number[]` (always an array, even for single-thumb sliders) — unwrap with `value[0]` when
  you only need a scalar.
- Range sliders enforce `minValue[i] <= value[i] <= value[i+1] <= maxValue` automatically; you don't need to clamp in
  user land.

## Credits

- We use [Base UI](https://base-ui.com/react/components/slider) for the slider component.
- We take our inspiration from [Shadcn UI](https://ui.shadcn.com/docs/components/slider) for the slider style.