HTML range input: capture an approximate bounded choice

When the element earns its place

A dispatch planner sets a provisional handling priority from one through seven. A slider is suitable because the choice is approximate and the labels describe the scale; it would be a poor control for an exact invoice amount. The output below exposes the initial value in text. If client code updates the slider, it must update that output too, while the server still validates the numeric range and business rule.

<form action="/dispatch/priority" method="post">
  <label for="handling-priority">Handling priority: 1 low, 7 urgent</label>
  <input id="handling-priority" name="priority" type="range" min="1" max="7" step="1" value="4">
  <output for="handling-priority" name="priority_preview">4 of 7</output>
  <button type="submit">Save priority</button>
</form>

Behavior boundary

Output is not a substitute for the named range control. The initial output remains static unless application code synchronizes it after changes; the sample deliberately avoids pretending that behavior exists.

Cost and operational limits

The native slider is lightweight. Synchronizing one label takes trivial client work, while persisting priority and preventing unauthorized changes belong to the application backend.

Common Mistakes

• Do not use a slider when users need an exact value.
• Do not present a stale output as a live preview.
• Do not accept a submitted value outside the server's allowed range.

Connected lessons

• HTML progress, meter, and output: three different value relationships
• HTML input types: choose controls from the value contract
• HTML constraint validation: improve feedback without trusting the browser