# Slider

- Page: <https://kznlabs.github.io/labsUI/components/slider>

## Slider (`slider`, component)

Slider over native range inputs: thin accent track, white knob that lifts while held. One value or two for a range; keyboard, forms, touch and Field wiring come from the platform.

- Install: `npx @kznlabs/labsui add slider`
- Docs: <https://kznlabs.github.io/labsUI/components/slider>
- Brings: field, label, use-controllable-state, utils
- npm: clsx@^2.1.1, motion@14.7.1, tailwind-merge@^3.7.0

### API

- `<Slider>`: Slider over native range inputs: keyboard, forms, touch and screen readers work as the
browser does. Thin accent track, white knob that lifts while held. Two values = range.
  - `aria-describedby?: string`: Ids of hint or error text; Field fills it in.
  - `aria-invalid?: boolean`: Error styling; Field sets it from `error`.
  - `defaultValue?: number[]`: Values at first render (uncontrolled).
  - `disabled?: boolean`: Blocks dragging and keys.
  - `id?: string`: Id of the first thumb; Field fills it in.
  - `labels?: string[]`: Accessible names per thumb; defaults to "Minimum" / "Maximum" for a range.
  - `max?: number`: Highest value.
  - `min?: number`: Lowest value.
  - `name?: string`: Submitted per thumb: `name` (one value) or `name` twice (range).
  - `onValueChange?: (value: number[]) => void`: Called with every thumb's value while dragging.
  - `step?: number`: Increment for drag and arrow keys.
  - `value?: number[]`: One value, or two for a range (e.g. a price filter).

### Usage

```tsx
<Slider value={price} onValueChange={setPrice} min={0} max={250} step={5} />
```

### Example: price-filter.tsx

```tsx
"use client";

import { useState } from "react";
import { Field } from "@/components/ui/field";
import { Slider } from "@/components/ui/slider";

export function PriceFilter() {
  const [price, setPrice] = useState([40, 180]);
  return (
    <Field label="Price" description={`$${price[0]} – $${price[1]}`}>
      <Slider value={price} onValueChange={setPrice} min={0} max={250} step={5} name="price" />
    </Field>
  );
}
```