HtmlHow-ToBeginner · 3 min read

How to Create Range Input in HTML: Syntax and Examples

To create a range input in HTML, use the <input> element with type="range". You can set attributes like min, max, and step to control the slider's range and increments.

📐

Syntax

The basic syntax for a range input uses the <input> tag with type="range". You can add these attributes:

min: The smallest value the slider can have.
max: The largest value the slider can have.
step: How much the value changes when you move the slider.
value: The starting value of the slider.

html

<input type="range" min="0" max="100" step="1" value="50">

Output

A horizontal slider with values from 0 to 100, starting at 50.

💻

Example

This example shows a range slider from 0 to 10 with steps of 0.5. The slider starts at 5. You can move it to select a value.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Range Input Example</title>
</head>
<body>
  <label for="volume">Volume:</label>
  <input type="range" id="volume" name="volume" min="0" max="10" step="0.5" value="5">
</body>
</html>

Output

A labeled horizontal slider with values from 0 to 10 in 0.5 steps, starting at 5.

⚠️

Common Pitfalls

Common mistakes when using range inputs include:

Not setting min and max, which defaults to 0 and 100 but can confuse users.
Using a step value that doesn't fit evenly between min and max, causing unexpected slider stops.
Not labeling the slider, which hurts accessibility.

Always add a label and choose values that make sense for your use case.

html

<!-- Wrong: No min, max, or label -->
<input type="range">

<!-- Right: With min, max, step, and label -->
<label for="brightness">Brightness:</label>
<input type="range" id="brightness" min="0" max="200" step="10" value="100">

Output

First input: unlabeled slider with default range 0-100. Second input: labeled slider from 0 to 200 in steps of 10, starting at 100.

📊

Quick Reference

Attribute	Description	Default
type	Must be "range" to create a slider	—
min	Minimum slider value	0
max	Maximum slider value	100
step	Increment steps for slider movement	1
value	Starting value of the slider	min or 0

✅

Key Takeaways

Use to create a slider input in HTML.

Always set min, max, and step attributes to control the slider range and increments.

Add a label for accessibility and clarity.

Choose step values that fit evenly between min and max to avoid unexpected stops.

The value attribute sets the slider's starting position.