Live demo — this example is server-driven; run the showcase locally for the interactive version.

Slider

Pick a numeric value from a continuous range by dragging or clicking. Alpine tracks the value; the thumb position is computed as a percentage of (value − min) / (max − min).

Examples

Discrete

Click the rail; the floating value follows.

Continuous

0–100 with no steps.

Value input

A number input stays in sync with the slider.

Thumb value input

The editable value input floats above the thumb and follows it along the rail.

Actions

Minus/plus buttons flank the slider; arrows work on the thumb.

Custom range

Custom min/max bounds.

Disabled

Non-interactive.

Documentation

Slider props

Parameters accepted by {#include components/forms/slider ... /}. Model mode: pass slider=<Slider> built in Java instead — the Java tab on each example shows the builder.

* required
Name	Type	Description
* `id`	String	DOM id.
`value`	Number	Initial value. Default 50.
`min` / `max`	Number	Range bounds. Default 0 / 100.
`disabled`	boolean	Adds `pf-m-disabled` and ignores click/drag.

Usage

Continuous values only. Slider is for ranges where the user picks somewhere along a continuum (volume, opacity, brightness). For a small fixed list of choices use Radio or Toggle group.

Keyboard a11y. The thumb has role="slider" and is focusable; PF's CSS handles the visual focus ring. Wire keyboard arrow handlers in your own Alpine block if you need ←/→ adjustment.

Edit slider.html on GitHub