Numbers and sliders in HTML

Same value, two controls: one you type into and one you drag.

<label for="qty">Quantity</label>
<input type="number" id="qty" name="qty" min="1" max="99"
       step="1" value="1">

<label for="weight">Weight (kg)</label>
<input type="number" id="weight" name="weight" min="0" step="any">

<label for="volume">Volume</label>
<input type="range" id="volume" name="volume" min="0" max="100"
       step="5" value="40">

How it works

1. min, max and step bound both of them.
2. step="any" lets a number field take decimals of any precision.
3. A range has no visible value, so pair it with <output>.

The run, in numbers

Lines

10

Characters to type

340

Tokens

99

Three-star pace

70 tpm

At the three-star pace of 70 tokens a minute, this run takes about 85 seconds.

Type this snippet

Step 1 of 4 in Numbers, dates & files, step 15 of 25 in Forms & inputs.

← Previous Next →