HTML Range Slider

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.

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.

<input type="range">

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

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?

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.

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.

<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]

• 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

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

Choose the option that lists all and only the correct statements.

1. min
2. max
3. step
4. pattern

Choose the option that lists all and only the correct statements.

1. Collecting parent contact number
2. Student satisfaction rating (1 to 5)
3. Volume control on an e-learning module
4. Attendance percentage estimate (0 to 100)

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.