Slider

A plain <input type="range">. s72.js keeps --s72-fill in step with the value, so the filled part of the track always matches the handle.

Basic

<label data-field>
  <span>Cache lifetime</span>
  <input type="range" min="0" max="90" value="30">
  <small>Days before a built page is rendered again.</small>
</label>

Drag the handle or use the arrow keys; the track fills as the value changes.

Notes

• s72.js sets --s72-fill on every range input at load and on each input event.
• Without the script the slider still works; the fill just sits where --s72-fill starts.
• The track uses the go tone for the filled part and --s72-line for the rest.