HTML Range Slider: min, max, step, Live Output, and Reset

HTML input type="range" selects a number within a defined range using a slider. Set its bounds and interval with min, max, and step, and its initial value with value. It suits relative adjustments such as volume or brightness; use a separate output element and JavaScript to display the current number.

Understand the range and defaults

A range input has no empty value. Omitting value does not mean “not yet selected,” and required does not apply. If it matters whether a survey choice was made explicitly, consider explicit choices or another input method.

Steps are calculated from a base. For example, min="16" max="32" step="2" allows 16, 18, 20, through 32. Browsers can normalize an initial value outside the range or step, so verify the actual current value matches your intended default.

Complete example: change font size live

Save this code as range.html and open it in a browser. No server or library is needed. The slider changes an example sentence’s font size from 16 to 32 px in 2 px steps, and submission displays the actual form data instead of sending it.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Adjust font size with range</title>
  <style>
    body { margin: 24px; font-family: sans-serif; }
    label { display: block; margin-bottom: 12px; }
    input[type="range"] { width: 20rem; max-width: 100%; accent-color: #1769aa; }
    #preview { overflow-wrap: anywhere; }
    pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <h1>Adjust font size</h1>
  <form id="demo">
    <label for="fontSize">Example font size (16–32 px, 2 px steps)</label>
    <input id="fontSize" name="fontSize" type="range"
      min="16" max="32" step="2" value="20">
    <p>Current size: <output id="selected" for="fontSize">20</output>px</p>
    <p><button type="submit">Show submitted values</button>
      <button type="reset">Reset</button></p>
  </form>
  <p id="preview">Moving the slider changes the font size of this sentence.</p>
  <pre id="result" aria-live="polite"></pre>
  <script>
    const form = document.querySelector('#demo');
    const slider = document.querySelector('#fontSize');
    const selected = document.querySelector('#selected');
    const preview = document.querySelector('#preview');
    const result = document.querySelector('#result');
    function update() {
      selected.value = slider.value;
      preview.style.fontSize = `${slider.valueAsNumber}px`;
      result.textContent = '';
    }
    slider.addEventListener('input', update);
    form.addEventListener('submit', (event) => {
      event.preventDefault();
      result.textContent = JSON.stringify([...new FormData(form).entries()], null, 2);
    });
    form.addEventListener('reset', () => {
      requestAnimationFrame(update);
    });
    update();
  </script>
</body>
</html>

1. Initially the displayed size is 20 px and the preview uses that size. Submit to see the string "20" under the name fontSize.
2. Move the slider with a pointer and check that the number and font size update together. Use Tab to reach it and try the arrow keys too.
3. For example, one Right Arrow step changes 20 to 22: the display becomes 22 and the font size 22 px. Submission now shows "22".
4. Reset returns the slider, number, and preview size to 20. The reset handler schedules update for the next frame so it reads the value after native reset has taken effect.

The example uses the input event for immediate updates while adjusting. Consider change when processing a committed adjustment instead. Their timing and purpose differ; choose based on whether you need a live preview.

Distinguish current, submitted, and initial values

slider.value is the current number as a string; slider.valueAsNumber is numeric. The HTML value attribute is the initial value: moving the slider does not also change that attribute string. Read the element’s current value to display or save it.

output displays a calculated or selected result; it does not replace a submitted form field. The example submits the named range input. Real server storage needs an existing route and request handling, and server-side range and step validation.

Choose between range and number and check the display

If users need to enter a precise quantity, amount, or length, consider number input range and step settings. Sliders quickly adjust an approximate level, but selecting an exact number can be difficult on narrow screens. When precision is needed, a synchronized numeric input can accompany the slider.

accent-color can change the native slider’s accent color. It does not necessarily color every part identically, and appearance varies with browser and operating system. Check mobile width, adequate interaction space, label association, keyboard focus, and the numeric display together.

The MDN range input reference documents defaults and attribute support.