# Slider

Slider is a neobrutalist React component from Cruise UI. Pick a value or a range by dragging: a 12px track, --primary range and square ink thumbs.

Install (with the @cruiseui registry in components.json, see Installation):

```bash
npx shadcn@latest add @cruiseui/slider
```

Import: `import { CruiseSlider } from "@/components/cruise/slider";`

## When to use

Approximate values in a range: a price filter, volume, distance.

## When not to

Exact amounts (use a Naira input or an Input).

## Example (React)

```tsx
"use client";

import { CruiseSlider } from "@/components/cruise/slider";

const naira = { style: "currency", currency: "NGN", maximumFractionDigits: 0 } as const;

export default function SliderExample() {
  return (
    <div className="flex max-w-md flex-col gap-8">
      <CruiseSlider
        label="Price"
        defaultValue={[5000, 25000]}
        min={0}
        max={50000}
        step={500}
        format={naira}
        showLimits
        thumbLabels={["Lowest price", "Highest price"]}
      />
      <CruiseSlider label="Volume" defaultValue={60} />
    </div>
  );
}
```

## HTML

Needs theme.css (https://cruiseui.dev/theme.css).

```html
<div class="slider">
  <div class="slider-head">
    <label class="field-label" for="price">Max price</label>
    <output class="slider-value" for="price" id="price-out">₦25,000</output>
  </div>
  <input class="slider-native" type="range" id="price" min="0" max="50000" step="500" value="25000" aria-valuetext="₦25,000">
  <div class="slider-limits" aria-hidden="true"><span>₦0</span><span>₦50,000</span></div>
</div>
```

## Props: CruiseSlider

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `label` | `string` | — | — |
| `value?` | `V` | — | — |
| `defaultValue?` | `V` | — | — |
| `onValueChange?` | `((value: V) => void)` | — | — |
| `min?` | `number` | `0` | — |
| `max?` | `number` | `100` | — |
| `step?` | `number` | `1` | — |
| `format?` | `NumberFormatOptions` | — | Number format for the value labels and screen readers, e.g. { style: "currency", currency: "NGN", maximumFractionDigits: 0 }. |
| `showValue?` | `boolean` | `true` | The current value(s) next to the label. |
| `showLimits?` | `boolean` | `false` | The min and max under the track. |
| `thumbLabels?` | `[string, string]` | `["Minimum", "Maximum"]` | Names for the two thumbs of a range, read after the label. |
| `disabled?` | `boolean` | — | — |
| `className?` | `string` | — | — |

## Accessibility

- role="slider" thumbs with aria-valuenow and a formatted aria-valuetext (₦25,000).
- Arrows, Page Up / Down, Home / End move the thumbs.
- Each thumb of a range has its own name (Lowest / Highest price).