Range Inputs

Range Inputs

Range controls let users choose a numeric value within a defined minimum and maximum.

Core concept

Explain form-range with min, max, and step attributes and show how a label and output element can communicate the current value.

Using it in a real interface

Build a volume slider and connect it to a numeric output with a small JavaScript event listener. Explain why the HTML attributes define the valid range while JavaScript updates the display.

Implementation notes

Do not assume the slider value is obvious from its position. For settings where the exact number matters, show the current value beside the control.