Range Slider in HTML Forms - input type='range' with min, max, step

Range Slider in HTML Forms: Interactivity in One Simple Control

Sliders aren’t just stylish — they’re functional. Whether you're rating bananas or choosing a price range, <input type="range"> offers a fast, touch-friendly way to select numeric values with precision and visual clarity.

What is a Range Input?

A range input displays a horizontal slider. It lets users pick a number within a specified range by dragging a thumb across a track — a far better experience than typing.

Basic Syntax

<input type="range">

But without attributes, it’s not very useful. Let's bring it to life with min, max, and step.

Setting Minimum and Maximum Values

To limit the range of values, add min and max.

<label for="rating">Rate the cherry (1 to 5):</label><br>
<input type="range" id="rating" name="rating" min="1" max="5">

Rate the cherry: [ ●——— ] (drag from 1 to 5)

The user can only select values between 1 and 5 — but what values, exactly?

Controlling Increments with step

Use the step attribute to control the intervals between values.

<input type="range" min="0" max="10" step="2">

Values allowed: 0, 2, 4, 6, 8, 10

This is perfect when you want the user to select even numbers, price brackets, or rating tiers.

Displaying the Selected Value (Bonus: JS Enhancement)

HTML alone doesn’t show the value of a slider as you move it. Here’s a basic enhancement with JavaScript:

<label for="bananaSweetness">Banana Sweetness (1–10):</label><br>
<input type="range" id="bananaSweetness" name="sweetness" min="1" max="10" value="5" 
        oninput="document.getElementById('output').value = this.value">
<output id="output">5</output>

Banana Sweetness: [ ●——— ] 5

The output tag shows the live value as the user slides across the track — clean, responsive, and useful.

Complete Example: Fruit Freshness Survey

<form action="/submit-rating" method="post">

  <label for="fruit">Select a fruit:</label><br>
  <select name="fruit" id="fruit">
    <option>Apple</option>
    <option>Banana</option>
    <option>Cherry</option>
  </select><br><br>

  <label for="freshness">Freshness Rating (0–100):</label><br>
  <input type="range" name="freshness" id="freshness" min="0" max="100" step="10"
          oninput="document.getElementById('val').textContent = this.value">
  <span id="val">50</span><br><br>

  <input type="submit" value="Submit Feedback">

</form>

Select a fruit: [ Banana ▼ ]
Freshness Rating: [ ●——— ] 50
[Submit Feedback]

Best Practices

• Always define min and max to give sliders meaningful boundaries
• Use step to control precision — 1 for ratings, 10 or 100 for ranges
• Use JavaScript to reflect live value — improves usability dramatically
• Label clearly — users need to know what they’re adjusting

Summary

The HTML range slider is an elegant, interactive way to collect numeric data. You've now learned to:

• Use <input type="range"> for slider controls
• Set valid ranges with min, max, and step
• Show real-time values with a simple JS enhancement

What’s Next?

Let’s brighten things up — in the next tutorial, we’ll explore the Color Picker and how it helps users visually choose colors in your forms.