Range

A styled range slider input. Built on <input type="range"> with DaisyUI's range class. Supports sizes, color tokens, custom min / max / step, and step markers via a <datalist>.

Default

Basic range at 50%.

Colors

All eight DaisyUI color tokens.

Sizes

Five sizes: xs → xl.

Custom min / max / step

min, max, and step pass directly to the native element.

Disabled

Non-interactive state.

With value display

Show the current value alongside the slider using a oninput handler.

Volume control

Real-world usage inside a media player card.