> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getsabo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Slider

> Range input for selecting numeric values.

<Frame>
  <img src="https://mintcdn.com/aristotechnologiesinc/AI-6KNJJN4jkkZTo/images/ui/slider-light.png?fit=max&auto=format&n=AI-6KNJJN4jkkZTo&q=85&s=7c7ccd31b0f1712efb9683bb255dce3a" alt="Slider component preview (light)" width="200" data-path="images/ui/slider-light.png" />
</Frame>

* **Location**: `sabo/src/components/ui/slider.tsx`

## When to use

* Choose a value or range visually (volume, price range).
* Use inputs for exact values; Sliders are great for exploration.

## Usage

```tsx sabo/src/components/ui/slider.tsx theme={null}
import { Slider } from "@/components/ui/slider";

export function Example() {
  return <Slider defaultValue={[20, 80]} className="w-64" />;
}
```

## Key props

<ParamField path="value" type="number[]">
  Controlled values (single or range). Use <code>defaultValue</code> for uncontrolled.
</ParamField>

<ParamField path="min" type="number" default="0">
  Minimum value.
</ParamField>

<ParamField path="max" type="number" default="100">
  Maximum value.
</ParamField>

<Note>
  This component forwards all props from Radix Slider primitives (Root/Thumb/Track, etc.). Above are commonly used props. For the full API, see Radix docs: [https://www.radix-ui.com/primitives/docs/components/slider](https://www.radix-ui.com/primitives/docs/components/slider)
</Note>

## Styling tip

* Adjust orientation via CSS classes; vertical sliders need a fixed height.
* Thicken the track with <code>data-\[orientation=horizontal]:h-2</code>.

## Accessibility

* Provide a nearby label and current value when the context isn’t obvious.