---
outline: deep
---

# Slider

Sliders let users pick a numeric value — or a min–max range — by dragging a thumb along a track.

**`<l-slider>`** — Custom Element · Shadow DOM

```html
<l-slider
  label="Volume"
  min="0"
  max="100"
  value="40"
  name="volume"
></l-slider>
```

## Options

### Basic

Set `value` (and optionally `min`, `max`, `step`). `label` gives the thumb its accessible name.

```html
<div class="w-64">
  <l-slider
    label="Volume"
    value="40"
    name="volume"
  ></l-slider>
</div>
```

### Range

Add `range` and set `min-value` / `max-value` for a two-thumb min–max selection. The thumbs cannot cross.

```html
<div class="w-64">
  <l-slider
    label="Price"
    range
    min-value="20"
    max-value="70"
    name="price"
  ></l-slider>
</div>
```

### Sizes

Set `size` to `xs`, `sm`, `md` (default), `lg`, or `xl`.

```html
<div class="flex flex-col gap-4 w-64">
  <l-slider
    size="xs"
    label="Extra small"
    value="40"
  ></l-slider>
  <l-slider
    size="sm"
    label="Small"
    value="40"
  ></l-slider>
  <l-slider
    size="md"
    label="Medium"
    value="40"
  ></l-slider>
  <l-slider
    size="lg"
    label="Large"
    value="40"
  ></l-slider>
  <l-slider
    size="xl"
    label="Extra large"
    value="40"
  ></l-slider>
</div>
```

### Custom colors

Override `--indicator-color` (and `--track-color`, `--thumb-color`).

```html
<div class="w-64">
  <l-slider
    label="Storage used"
    value="65"
    style="--indicator-color: var(--l-color-bg-fill-success-strong)"
  ></l-slider>
</div>
```

### Vertical

Set `orientation="vertical"` for a vertical slider (it increases upward). Override `--length` to change its height.

```html
<div class="flex gap-10">
  <l-slider
    label="Volume"
    orientation="vertical"
    value="40"
  ></l-slider>
  <l-slider
    label="Price"
    orientation="vertical"
    range
    min-value="20"
    max-value="70"
    with-tooltip
  ></l-slider>
</div>
```

### With tooltip

Add `with-tooltip` to show the current value above a thumb while it's focused or dragged. Assign the `valueFormatter` property — `(value) => string` — to add a unit or currency (it also sets `aria-valuetext`).

```html
<div class="flex flex-col gap-6 w-64">
  <l-slider
    label="Volume"
    value="40"
    with-tooltip
  ></l-slider>
  <l-slider
    label="Price"
    range
    min-value="20"
    max-value="70"
    with-tooltip
  ></l-slider>
</div>
```

### Disabled

Native `disabled` attribute.

```html
<div class="w-64">
  <l-slider
    label="Volume"
    value="40"
    disabled
  ></l-slider>
</div>
```

### Not defined

Before the custom element upgrades (`:not(:defined)`), `<l-slider>` paints a static rail with a faint fill at its reserved height — so it reads as a slider at rest with no flash or layout shift on hydration. Override the shipped `l-slider:not(:defined)` rule to customize it.

Once upgraded, the shadow root renders the interactive track and thumbs.

## Accessibility

### Criteria

- **Role** — Each thumb is a `role="slider"` with `aria-valuemin` / `aria-valuemax` / `aria-valuenow`
- **Accessible name** — Set `label`; in range mode each thumb is suffixed Minimum / Maximum
- **Target size** — Each thumb exposes a ≥24×24px hit area
- **Focus** — Focused thumb shows a focus ring via `:focus-visible`

### Rules

- Always set `label` so each thumb has an accessible name

### Keyboard interactions

- `Tab` — Moves focus to the next thumb
- `ArrowRight / ArrowUp` — Increases the value by one step
- `ArrowLeft / ArrowDown` — Decreases the value by one step
- `Page Up / Page Down` — Increases / decreases by a larger step
- `Home / End` — Jumps to the minimum / maximum value

## API reference

### Importing

```js
import 'luxen-ui/slider';
```

### Attributes & Properties

- **min**: `number` (default: `0`) — Minimum value.
- **max**: `number` (default: `100`) — Maximum value.
- **step**: `number` (default: `1`) — Step increment.
- **value**: `number` (default: `0`) — Single-thumb value.
- **range**: `boolean` (default: `false`) — Enable a two-thumb min–max range.
- **min-value**: `number` (default: `0`) — Lower value (range mode).
- **max-value**: `number` (default: `100`) — Upper value (range mode).
- **label**: `string` — Accessible label for the slider (and base for the range thumbs' names).
- **size**: `SliderSize` (default: `'md'`) — Control size.
- **orientation**: `SliderOrientation` (default: `'horizontal'`) — Layout axis. Vertical sliders increase upward.
- **with-tooltip**: `boolean` (default: `false`) — Show a tooltip with the current value while a thumb is focused or dragged.
- **valueFormatter**: `(value: number) => string | undefined` — Formats a value for the tooltip and the `aria-valuetext` announcement.
Assign a function `(value: number) => string`, e.g. to add a unit or currency.
- **values**: `number[]` — Current thumb values, low to high.

### Events

- **input** — Fired continuously while a thumb moves. Bubbles. Not cancelable. Properties: `value: number`, `values: number[]`.
- **change** — Fired when a thumb is released. Bubbles. Not cancelable. Properties: `value: number`, `values: number[]`.

### CSS parts

- `base` — The slider container.
- `track` — The full-width rail.
- `indicator` — The filled portion of the rail.
- `thumb` — Each draggable thumb.
- `tooltip` — The value tooltip shown above a thumb when `with-tooltip` is set.

### CSS custom properties

- `--track-size` — Thickness of the rail.
- `--thumb-size` — Diameter of each thumb.
- `--track-color` — Color of the unfilled rail.
- `--indicator-color` — Color of the filled portion.
- `--thumb-color` — Background color of the thumbs.