# Slider

## Overview

Radix-based slider with DS styling, optional value labels, sticky labels on thumbs, predefined step snapping, and center-offset fill.

---

## Props

| Prop                | Type                        | Default     | Description                                            |
| ------------------- | --------------------------- | ----------- | ------------------------------------------------------ | -------- | ------------------- |
| `value`             | `number[]`                  | `undefined` | Controlled value (single `[n]` or range `[a,b]`).      |
| `defaultValue`      | `number[]`                  | `undefined` | Uncontrolled initial value.                            |
| `min`               | `number`                    | `0`         | Minimum.                                               |
| `max`               | `number`                    | `100`       | Maximum.                                               |
| `step`              | `number`                    | `1`         | Increment.                                             |
| `size`              | `"base"                     | "medium"    | "large"`                                               | `"base"` | Track/thumb sizing. |
| `formatValue`       | `(value: number) => string` | `undefined` | Formatter for labels.                                  |
| `showValues`        | `boolean`                   | `false`     | Show min/current (and max for single-value).           |
| `showStickyLabel`   | `boolean`                   | `false`     | Show a `Badge` over the thumb with current value.      |
| `stickyLabelSuffix` | `string`                    | `""`        | Suffix for sticky label.                               |
| `fillOffset`        | `boolean`                   | `false`     | Fill track from center/`offsetValue` to current value. |
| `offsetValue`       | `number`                    | `undefined` | Center reference for `fillOffset`.                     |
| `steps`             | `number[]`                  | `undefined` | Predefined snapping steps.                             |
| `showStepMarkers`   | `boolean`                   | `false`     | Visual markers for `steps`.                            |

Inherits other Radix `Slider` props.

---

## Examples

```tsx
import * as React from "react";
import { Slider } from "laif-ds";

export function Controlled() {
  const [value, setValue] = React.useState([25]);
  return <Slider value={value} onValueChange={setValue} size="medium" />;
}

export function WithSteps() {
  const [val, setVal] = React.useState([50]);
  return (
    <Slider
      value={val}
      onValueChange={setVal}
      steps={[0, 25, 50, 75, 100]}
      showStepMarkers
    />
  );
}
```

---

## Notes

- **Snapping**: When `steps` provided, values snap to nearest step.
- **Range**: Provide two values like `[min, max]` to enable a range slider.
- **Theming**: Uses DS tokens for track, range and thumb states.