Slider
A range input with a styled track and thumb. Supports controlled and uncontrolled modes, custom min/max/step, and an optional live value readout.
Default
Arrow keys move the thumb by one step. Home and End jump to the min and max. The filled track reflects the current value.
With value display
Pass showValue to render the current value alongside the track as an <output> element — semantically linked to the input.
Step increments
Use step to snap the value to fixed intervals. The example below steps by 10.
Custom range
Set min and max to any numeric range.
Controlled
Drive the slider from external state. Both sliders share independent controlled values.
Volume — 40%
Brightness — 70%
Disabled
A disabled slider is read-only and non-interactive.