# Slider

```tsx
import { Slider } from '@tangible/ui';
```

Interactive docs and examples: [Slider in Storybook](https://storybook-tangible-ui.pages.dev/?path=/docs/forms-slider--docs).

## Slider props

| Prop | Type | Default | Description |
| - | - | - | - |
| `aria-label?` | `string` | | |
| `aria-labelledby?` | `string` | | |
| `className?` | `string` | | |
| `defaultValue?` | `number` | | Uncontrolled initial value. Defaults to `min`. |
| `disabled?` | `boolean` | `false` | |
| `endLabel?` | `ReactNode` | | Label rendered under the track's end edge (e.g. "More rounded"). |
| `getValueText?` | `(value: number) => string` | | Human-readable value for assistive tech (`aria-valuetext`), e.g. `(v) => `${v} pixels\`\`. Without it screen readers announce the number. |
| `id?` | `string` | | |
| `max?` | `number` | `100` | Maximum value. Defaults to 100. |
| `min?` | `number` | `0` | Minimum value. Defaults to 0. |
| `onValueChange?` | `(value: number) => void` | | Called with the new value on every change. |
| `segments?` | `number` | `1` | Track segmentation: renders the track as this many pill segments with gaps between them, and (unless `step` says otherwise) snaps the value to the segment boundaries. `1` (default) is a continuous track. |
| `startLabel?` | `ReactNode` | | Label rendered under the track's start edge (e.g. "Less rounded"). |
| `step?` | `number` | | Step increment. Defaults to 1 — except on a segmented track, where it defaults to the segment span so the value snaps to segment boundaries. Pass an explicit step to override either default. |
| `value?` | `number` | | Controlled value. |

## Examples

Stories: Basic, Segmented, Stepped values, Disabled ([interactive page](https://storybook-tangible-ui.pages.dev/?path=/docs/forms-slider--docs)).

## Component API tokens

Read via fallback, never declared. Set one on an ancestor to restyle every instance under it.

- `--tui-slider-track-height`
- `--tui-slider-track-bg`
- `--tui-slider-fill`
- `--tui-slider-gap`
- `--tui-slider-segment-radius`
- `--tui-slider-thumb-size`
- `--tui-slider-thumb-bg`
- `--tui-slider-label-fg`

---

Interactive version: https://storybook-tangible-ui.pages.dev/?path=/docs/forms-slider--docs