<input type="number"> / type="range"> / <datalist>

Since:		HTML5（2014）

For numeric input, you can use type="number" and type="range". The datalist element provides a list of suggestions for an input field, and the output element displays a value — such as the current position of a slider — making your forms more interactive and user-friendly.

Syntax

<!-- Numeric input (with spinner) -->
<input type="number" name="qty" min="1" max="99" step="1" value="1">

<!-- Slider -->
<input type="range" name="volume" min="0" max="100" value="50">

<!-- datalist (suggestion list) -->
<input type="text" name="city" list="cities">
<datalist id="cities">
  <option value="Tokyo">
  <option value="Osaka">
  <option value="Nagoya">
</datalist>

<!-- Color picker -->
<input type="color" name="theme" value="#3498db">

<!-- output (displays a calculated or dynamic value) -->
<output name="result" for="a b">0</output>

Elements and Attributes

Element / Attribute	Description
type="number"	A numeric input field. Displays up/down arrow buttons (a spinner) for incrementing and decrementing the value.
type="range"	A slider control for selecting a numeric value. The current value is not displayed visually by default.
type="color"	Displays a color picker UI for selecting a color. The submitted value is a hex color code in `#rrggbb` format.
datalist	Associates a list of suggestions with an input field. Set the input's `list` attribute to the `id` of the corresponding `datalist` element.
output	Displays a value that is dynamically updated by JavaScript, such as a calculation result or the current value of a slider.

Sample Code

sample_input_number_range_datalist.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>number / range / datalist</title>
</head>
<body>

  <form oninput="vol_out.value = volume.value">

    <!-- Numeric input -->
    <p>
      <label for="qty">Quantity (1–10):</label>
      <input type="number" id="qty" name="qty"
        min="1" max="10" step="1" value="1">
    </p>

    <!-- Slider + output to display the current value -->
    <p>
      <label for="volume">Volume:</label>
      <input type="range" id="volume" name="volume"
        min="0" max="100" value="50">
      <output name="vol_out" for="volume">50</output>
    </p>

    <!-- datalist to provide input suggestions -->
    <p>
      <label for="city">City:</label>
      <input type="text" id="city" name="city" list="city_list"
        placeholder="Enter a city name">
      <datalist id="city_list">
        <option value="Tokyo">
        <option value="Osaka">
        <option value="Nagoya">
        <option value="Fukuoka">
        <option value="Sapporo">
      </datalist>
    </p>

    <!-- Color picker -->
    <p>
      <label for="color">Theme Color:</label>
      <input type="color" id="color" name="theme" value="#3498db">
    </p>

    <p><button type="submit">Save Settings</button></p>
  </form>

</body>
</html>

Result

The quantity field shows a numeric input with a spinner. The volume field shows a slider with its current value ("50") displayed to the right — moving the slider updates the number in real time. The city field shows suggestions as you type.

View sample page

Notes

Because type="range" does not display the current value visually, it is almost always paired with an output element. As shown in the sample code above, using the form's oninput event lets you update the displayed value in real time as the user moves the slider.

datalist only provides suggestions — users can still type any value they choose, including ones not in the list. If you need to restrict input to a fixed set of options, use a select element instead of datalist.

type="color" displays a dedicated color picker UI in supported browsers (Chrome, Firefox, Edge, etc.). In older browsers it may fall back to a plain text input. The submitted value is always a lowercase hex color code (e.g., #3498db).

Browser Compatibility

Desktop

Chrome

7 and later ○

6 and earlier ×

Firefox

29 and later ○

28 and earlier ×

Safari

5.1 and later ○

4.1 and earlier ×

Edge

12 and later ○

11 ○

10 ○

9 ×

8 ×

7 ×

6 ×

Opera

15 and later ○

14 and earlier ×

Mobile

iOS Safari

5 and later ○

4 and earlier ×

Android Browser

4.4 and later ○

4 and earlier ×

Chrome Android

Latest ○

Same support as desktop version

Firefox Android

Latest ○

Same support as desktop version

* Version data based on MDN.

Integration with JavaScript

Range sliders greatly improve UX when paired with real-time value display.

<!-- Range slider with real-time display -->
<label for="volume">Volume: <span id="volume-display">50</span></label>
<input type="range" id="volume" name="volume"
       min="0" max="100" value="50" step="5">

<!-- Sync a number input and a range slider -->
<label for="price-slider">Max Price: $<span id="price-display">50</span></label>
<input type="range" id="price-slider" min="0" max="100" value="50" step="5">
<input type="number" id="price-number" min="0" max="100" value="50" step="5">

<script>
  // Display range value in real time
  var volumeSlider = document.getElementById('volume');
  var volumeDisplay = document.getElementById('volume-display');
  volumeSlider.addEventListener('input', function() {
    volumeDisplay.textContent = volumeSlider.value;
  });

  // Sync range and number inputs
  var priceSlider = document.getElementById('price-slider');
  var priceNumber = document.getElementById('price-number');
  var priceDisplay = document.getElementById('price-display');

  priceSlider.addEventListener('input', function() {
    priceNumber.value = priceSlider.value;
    priceDisplay.textContent = priceSlider.value;
  });
  priceNumber.addEventListener('input', function() {
    priceSlider.value = priceNumber.value;
    priceDisplay.textContent = priceNumber.value;
  });
</script>

If you find any errors or copyright issues, please contact us.

Home

HTML Dictionary