# Slider (/docs/components/slider)



<ComponentPreview name="slider-demo" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

## Overview [#overview]

Use Slider when users choose a value from a range.

Sliders are useful for volume, opacity, price range, thresholds, percentages, and settings where approximate adjustment is faster than typing.

## Anatomy [#anatomy]

A slider has a track, range, thumb, value, minimum, maximum, step, and optional label. Range sliders have more than one thumb.

## Behavior [#behavior]

Use a number field when exact numeric input is more important than quick adjustment. Use a slider when users benefit from seeing the range visually.

## Accessibility [#accessibility]

Provide a label and visible value when the number matters. Keep keyboard controls working for each thumb.

## Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTab value="cli">
      CLI
    </TabsTab>

    <TabsTab value="manual">
      Manual
    </TabsTab>
  </TabsList>

  <TabsPanel value="cli">
    ```bash
    npx love-ui@latest add slider
    ```
  </TabsPanel>

  <TabsPanel value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @base-ui-components/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

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

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsPanel>
</CodeTabs>

## Usage [#usage]

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

```tsx
<Slider />
```

## Examples [#examples]

The examples show labeled values, range selection, vertical orientation, and form integration.

For accessible labelling and validation, prefer using the `Field` component to wrap checkboxes. See the related example: [Slider field](/ui/docs/components/field#slider-field).

### With Label and Value [#with-label-and-value]

<ComponentPreview name="slider-with-label-value" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

### Range Slider [#range-slider]

<ComponentPreview name="slider-range" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

### Vertical [#vertical]

<ComponentPreview name="slider-vertical" />

### Form Integration [#form-integration]

<ComponentPreview name="slider-form" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />