# Slider field (goodtabs UI)

A slider with a label, the current value in mono and min and max marks.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/slider-field.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/slider-field`

## Usage

```tsx
import { SliderField } from "@/components/ui/slider-field"

<SliderField label="Volume" defaultValue={40} />
<SliderField label="Price" defaultValue={[200, 800]} max={1000} step={50} format={(v) => `$${v}`} />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| label | `ReactNode` |  | Label on the left and the accessible name of the thumbs. |
| value | `number | number[]` |  | Controlled value. An array gives one thumb per entry. |
| defaultValue | `number | number[]` | `min` | Starting value when uncontrolled. |
| onValueChange | `(value: number | number[]) => void` |  | Fires on every move, same shape as value. |
| onValueCommit | `(value: number | number[]) => void` |  | Fires when the pointer or key is released. |
| min, max, step | `number` | `0, 100, 1` | The scale. |
| format | `(value: number) => string` | `String` | Formats the display and the marks. |

## When to use

- One number on a known scale where seeing the position matters: volume, opacity, budget
- A range with a lower and upper bound, such as a price filter
- Settings panels where the value should update as it moves

## When not to use

- For exact values people type, use an Input with type number
- For scales with many steps or no natural end, use an input or a select
- For on and off, use a switch

## Notes for agents

- The shape of value decides the thumbs: a number is one thumb, a number[] is one thumb per entry, and onValueChange returns the same shape
- onValueChange and format are functions, so render it from a client component; defaultValue alone works anywhere
- It uses the radix Slider directly rather than shadcn's slider, so every thumb can carry aria-labelledby and aria-valuetext
- The value display is aria-hidden; screen readers get the formatted value from aria-valuetext on the thumb

Docs: https://ui.goodtabs.co/components/slider-field