---
title: Slider
description: An easily stylable range input.
links:
  doc: https://base-ui.com/react/components/slider
  anatomy: https://base-ui.com/react/components/slider#anatomy
  api: https://base-ui.com/react/components/slider#api-reference
---

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

export function SliderDemo() {
  return <Slider defaultValue={50} className="max-w-xs" />;
}
```

## Installation

<ComponentSource name="slider" title="components/ui/slider.tsx" />

## Usage

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

```tsx
<Slider defaultValue={50} />
```

## Examples

### Labeling a slider

```tsx
import { Field, FieldLabel } from "@/components/ui/field";
import { Slider, SliderValue } from "@/components/ui/slider";

export function SliderDemo() {
  return (
    <Field className="max-w-xs">
      <Slider defaultValue={50}>
        <div className="mb-2 flex items-center justify-between">
          <FieldLabel>Opacity</FieldLabel>
          <SliderValue />
        </div>
      </Slider>
    </Field>
  );
}
```

### Range slider

```tsx
import { Field, FieldLabel } from "@/components/ui/field";
import { Slider, SliderValue } from "@/components/ui/slider";

export function SliderDemo() {
  return (
    <Field className="max-w-xs">
      <Slider defaultValue={[10, 90]}>
        <div className="mb-2 flex items-center justify-between">
          <FieldLabel>Price range</FieldLabel>
          <SliderValue />
        </div>
      </Slider>
    </Field>
  );
}
```

### Vertical

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

export function SliderDemo() {
  return <Slider defaultValue={50} orientation="vertical" className="max-w-xs" />;
}
```