---
title: "Slider"
description: "Pick a value, a range or several values on a track: native range inputs, horizontal or vertical, with every form state."
url: "https://susonwaiba.github.io/htmx-ui/docs/components/slider"
section: "Components"
---
# Slider
Pick a value, a range or several values on a track: native range inputs, horizontal or vertical, with every form state.
```html
```
## Markup
- Each thumb is a native ``.
- `data-slider` adds the behaviour: it paints the range as the values change, keeps thumbs from crossing, moves the nearest thumb to a press on the track, and fills ``. The inline `--slider-start` / `--slider-end` paint the range before it runs; the [`slider()` macro](#macro) writes them for you.
## Range
Two inputs make a range: the fill spans from one thumb to the other. Give them the same `name` and the form sends both values (`price=20&price=80`), or a name each.
```html
```
## Multiple thumbs
Any number of inputs, in ascending order. A thumb stops at its neighbours; `data-slider-gap` keeps them at least that far apart, in value units.
```html
```
## Orientation
`data-orientation="vertical"` stands the slider up, the minimum at the bottom. Give it (or its parent) a height; `↑` `↓` move it.
```html
```
## In a field, with its value
`.slider-field` puts a label and a `.slider-value` above the slider and a description below it. An `` naming the inputs' ids shows their values, joined with an en dash, and screen readers announce it as the result of those inputs.
```html
Budget
$200 – 800
Per month, before tax.
```
## States
Disable the inputs (or a `` around them) to fade the slider. `aria-invalid="true"` on an input turns it red, as on [inputs](https://susonwaiba.github.io/htmx-ui/docs/components/input); `.slider-warning` and `.slider-success` tint it too.
```html
```
## Sizes
```html
```
## With htmx
The inputs are ordinary form controls, so `hx-trigger="change"` sends the value once a drag ends (the behaviour fires `change` after a press on the track too), or `input changed delay:300ms` while it moves.
```html
Move a thumb.
```
## Macro
`slider()` writes the inputs, their names and labels, and the starting fill. Pass a number for one thumb or a list for several.
```jinja
{% from "components/slider/slider.html" import slider %}
{{ slider(50, aria_label="Volume", name="volume") }}
{{ slider([20, 80], name="price", min=0, max=500, step=10) }}
{{ slider([10, 40, 70], labels=["Low", "Mid", "High"], gap=10) }}
{{ slider(60, orientation="vertical", aria_label="Bass", class="h-44") }}
{{ slider(30, id="volume", disabled=true, variant="warning", size="sm") }}
```
## Reference
| Class | Description |
| --- | --- |
| `.slider` | The slider: a track and its thumbs (range inputs) laid over each other. |
| `.slider-track / .slider-range` | The track, and the filled part between --slider-start and --slider-end. |
| `.slider-field / .slider-value` | Label and value above the slider, description below. |
| `.slider-warning / .slider-success` | Tints the range and thumbs. |
| `.slider-sm / .slider-lg` | Thumb and track sizes. |
| `--slider-color, --slider-thumb, --slider-track` | The colour, thumb size and track thickness, to override. |
| `[data-slider]` | Behaviour: paints the range, orders thumbs, track presses, outputs. |
| `[data-orientation="vertical"]` | Vertical slider, minimum at the bottom. |
| `[data-slider-gap]` | The least distance between neighbouring thumbs, in value units. |