CodesBeautify

HTML Range Input Generator

Build a range slider with checked limits, a step, optional tick marks and a live value readout.

Range slider HTML0 to 100, step 1
<label for="volume">Volume</label>
<input type="range" id="volume" name="volume" min="0" max="100" step="1" value="50">
<output for="volume" id="volume-output">50</output>

<script>
var slider = document.getElementById('volume');
var readout = document.getElementById('volume-output');
slider.addEventListener('input', function () { readout.value = slider.value; });
</script>
Runs locally in your browser

About the HTML Range Input Generator

A range input is a slider, and it is only usable when its numbers agree with each other. This builder checks that the maximum is greater than the minimum, that the step is positive and that the starting value sits inside the range, so the snippet you copy cannot contain the contradictions that make a slider stick at one end or refuse to move. The markup pairs the control with a real label and gives it an id, which is also what the readout hooks onto.

Turn on the live value and you get an output element plus three lines of script that refresh it on every input event. Sliders are hard to read without that number, especially on a phone where a thumb covers part of the track. The tick marks option attaches a datalist with five evenly spaced stops; browsers that support it draw notches under the track, and the rest simply ignore the list, so it costs nothing to include.

Bear in mind that a slider communicates an approximate value. If the exact figure matters, a price ceiling or an age, offer a number input beside it or make the readout editable. Also remember that keyboard users move a slider with the arrow keys in single steps, so a range of 0 to 10000 with a step of 1 is effectively unreachable; raise the step instead. For a bar that reports progress rather than collecting a value, use the HTML Progress Generator.

How to use

  1. Enter the min, max and step for the value you are collecting.
  2. Set the starting value, which must sit inside that range.
  3. Keep the readout switched on so people can see the number they picked.
  4. Copy the markup, the output element and the short script together.

Common questions

Why does my slider only sit at the ends?
The step is usually too large for the range, so only a couple of positions are valid. Lower the step or widen the range.
How do I show the current value?
Pair the input with an output element and update it on the input event, which is exactly what the generated script does.
Can a range slider use decimals?
Yes. Set the step to a fraction such as 0.1 and the browser will report decimal values.
Do tick marks work everywhere?
Most desktop browsers draw them from a datalist. Where they are not supported the control still works, just without notches.