# Slider

> Single or range slider.

Source: https://ui.jcsoftdev.com/docs/components/slider

Single or range slider. The value shape decides the mode: a number gives one thumb and a
`[from, to]` tuple gives two. Each thumb is a `role="slider"` with arrow, Page and Home/End keys.

## Import

```ts
import { Slider } from "@jcsoftdev/ui/forms";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/forms/slider`.

## Usage

```tsx
<Slider
  min={0}
  max={100}
  step={5}
  defaultValue={40}
  aria-label="Descuento"
  showValue
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `number \| RangeValue` |  |  |
| `defaultValue` | `number \| RangeValue` |  |  |
| `onValueChange` | `((value: number) => void) \| ((value: RangeValue) => void)` |  |  |
| `min` | `number` |  |  |
| `max` | `number` |  |  |
| `step` | `number` |  |  |
| `pageStep` | `number` |  | Step used by PageUp/PageDown. Defaults to 10 steps. |
| `minGap` | `number` |  | Minimum distance between the two thumbs of a range. |
| `disabled` | `boolean` |  |  |
| `marks` | `SliderMark[]` |  | Ticks on the track; a `label` renders as a caption under it. |
| `showValue` | `boolean` |  | Shows the current value above each thumb; it is emphasized while dragged or focused. |
| `formatValue` | `((value: number) => string)` |  |  |
| `aria-label` | `string` |  | Accessible name; thumbs of a range get "mínimo"/"máximo" appended. |
| `aria-labelledby` | `string` |  |  |
| `name` | `string` |  | Form field name; a range submits `${name}-min` and `${name}-max`. |
| `className` | `string` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/forms-slider--default)
- [With Marks](/storybook/?path=/story/forms-slider--with-marks)
- [Range](/storybook/?path=/story/forms-slider--range)
- [Disabled](/storybook/?path=/story/forms-slider--disabled)
- [Controlled Value](/storybook/?path=/story/forms-slider--controlled-value)
- [Narrow](/storybook/?path=/story/forms-slider--narrow)
- [Brutal Preset](/storybook/?path=/story/forms-slider--brutal-preset)

## Source

`packages/ui/src/forms/slider/slider.tsx`