# Slider

<FrameworkCodeSwitcher>
  <div slot="astro">
```astro
---
import { Slider } from "@/components/starwind/slider";
---

<Slider defaultValue={25} aria-label="Volume" />
```
  </div>
  <div slot="react">
```tsx
import { Slider } from "@/components/starwind/slider";

export function Example() {
  return (
    <>
      <Slider defaultValue={25} aria-label="Volume" />
    </>
  );
}
```
  </div>
</FrameworkCodeSwitcher>

## Installation

```bash
npx starwind@latest add slider
```

## Usage

### General Notes

The `Slider` component provides an accessible way to select values within a range. It supports:

- **Single value selection**: Default mode with one thumb
- **Range selection**: Pass an array to `defaultValue` for two thumbs
- **Keyboard navigation**: Arrow keys, Page Up/Down, Home/End
- **Form integration**: Works with native form submission via hidden inputs

### Range Slider

Pass an array of two values to create a range slider with two thumbs.

```astro
---
import { Slider } from "@/components/starwind/slider";
---

<Slider defaultValue={[25, 75]} aria-label="Price range" />
```

### With Step

Use the `step` prop to control the increment value.

```astro
---
import { Slider } from "@/components/starwind/slider";
---

<Slider defaultValue={50} step={10} aria-label="Rating" />
```

### Variants

The slider supports multiple color variants.

```astro
---
import { Slider } from "@/components/starwind/slider";
---

<div class="flex flex-col gap-4">
  <Slider defaultValue={50} variant="default" aria-label="Default variant" />
  <Slider defaultValue={50} variant="primary" aria-label="Primary variant" />
  <Slider defaultValue={50} variant="secondary" aria-label="Secondary variant" />
  <Slider defaultValue={50} variant="info" aria-label="Info variant" />
  <Slider defaultValue={50} variant="success" aria-label="Success variant" />
  <Slider defaultValue={50} variant="warning" aria-label="Warning variant" />
  <Slider defaultValue={50} variant="error" aria-label="Error variant" />
</div>
```

### Disabled

```astro
---
import { Slider } from "@/components/starwind/slider";
---

<Slider defaultValue={40} disabled aria-label="Disabled slider" />
```

### Vertical Orientation

Set `orientation="vertical"` for a vertical slider. Make sure to provide a container with a defined height.

```astro
---
import { Slider } from "@/components/starwind/slider";
---

<div class="h-32">
  <Slider defaultValue={60} orientation="vertical" aria-label="Vertical slider" />
</div>
```

### Form Submission

The slider includes hidden `<input type="range">` elements for native form submission. For range sliders, the inputs are named with array notation (e.g., `price[0]`, `price[1]`).

```astro
---
import { Button } from "@/components/starwind/button";
import { Label } from "@/components/starwind/label";
import { Slider } from "@/components/starwind/slider";
---

<form id="slider-form" class="space-y-4">
  <div class="space-y-2">
    <Label for="volume">Volume</Label>
    <Slider defaultValue={50} name="volume" aria-label="Volume" />
  </div>
  <div class="space-y-2">
    <Label for="price-range">Price Range</Label>
    <Slider defaultValue={[20, 80]} name="price" aria-label="Price range" />
  </div>
  <Button type="submit">Submit</Button>
</form>

<script>
  const form = document.getElementById("slider-form") as HTMLFormElement;
  form.addEventListener("submit", (e) => {
    e.preventDefault();
    const formData = new FormData(form);
    const data = Object.fromEntries(formData.entries());
    console.log(data);
  });
</script>
```

## Framework Availability
Slider is available for Astro and React.
Astro available; React available
| Framework | Status | Notes |
| --- | --- | --- |
| Astro | available | - |
| React | available | - |
## API Reference
### Slider
| Prop | Type | Required | Default | Kind | Description |
| --- | --- | --- | --- | --- | --- |
| `defaultValue` | `number \| number[]` | No | `0` | Primitive override | Sets the initial value when the component is uncontrolled. |
| `orientation` | `"horizontal" \| "vertical"` | No | `"horizontal"` | Primitive override | Selects the horizontal or vertical layout direction. |
| `value` | `number \| number[]` | No | - | Primitive override | Controls or identifies the component value. |
| `variant` | `"default" \| "primary" \| "secondary" \| "info" \| "success" \| "warning" \| "error"` | No | `"default"` | Styled variant | Selects the component's visual variant. |
- Inherits div attributes. Omits `defaultValue`, `onChange`, and `value`.
### Primitive And Runtime API
Behavior, state, events, form participation, and imperative methods are documented in the lower-level references.
- Primitive: [Slider Primitive](/docs/primitives/slider/)
- Runtime factory: [`createSlider`](/docs/runtime/#create-slider) from `@starwind-ui/runtime/slider`

## Changelog

### v2.0.0

- Rebuilt Slider on Starwind Runtime for values, keyboard interaction, dragging, and native form participation.
- See the [Slider Primitive](/docs/primitives/slider/) for the underlying unstyled anatomy and behavior API.

### v1.0.2 

- Refactor tailwind variants functions into separate `variants.ts` file

### v1.0.0

- Initial release with starwind v1.13.0