---
name: slider
category: inputs
summary: "Single or range slider with keyboard and pointer drag"
subpath: "@42/core/slider"
---

Single-value or two-thumb range slider with full keyboard control and pointer
dragging. Single vs range is inferred from the number of thumbs. Positions are
exposed as `--c42-slider-start-percent` / `--c42-slider-end-percent` custom
properties for CSS.

```html
<div data-c42-slider>
  <div data-c42-slider-track>
    <div data-c42-slider-range></div>
    <div data-c42-slider-thumb aria-label="Value"></div>
  </div>
</div>
```

For a range, add two thumbs with `data-thumb="start"` / `data-thumb="end"`.

```ts
import { Slider } from '@42/core/slider';
const s = new Slider(root, { min: 0, max: 100, step: 5, value: 40 });
s.setValue(60);
```

Keyboard: arrows (±step), PageUp/PageDown (±10×step), Home/End (min/max).
Options: `min` (0), `max` (100), `step` (1), `value` (number | [start, end]), `orientation` ('horizontal'|'vertical'), `label`
Methods: `setValue(number | [start, end])`, `getValue()`
Events: `slider:change` → `{ value, values }`