laif-ds
Version:
Design System di Laif con componenti React basati su principi di Atomic Design
59 lines (43 loc) • 2.82 kB
Markdown
# 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.