← all demos

<range-slider>

The slider is a standalone form-associated custom element. No panel, no signals — this page uses it in a plain HTML form and reads it with the FormData API.

A plain form

Track curves

The same range on three tracks — 20 Hz to 20 kHz. The marks sit at 100 Hz, 1 kHz and 10 kHz, so you can see where each track puts them without touching anything. Drag one and the other two follow to the same value.

FormData

Events

Try: tab to a slider and use the arrow keys, Page↑/Page↓, Home/End. On the dual slider, hold Shift to move the lower handle. input fires while dragging, change on release.