Problem Statement
What does the range input type create?
Explanation
The range input type creates a slider control for selecting numeric values. Users drag the slider handle to choose a value within a specified range. By default, the range is 0 to 100, but you can customize it using min and max attributes. The step attribute controls how much the value changes with each slider movement. The value attribute sets the initial position. Range inputs are perfect for settings like volume control, brightness adjustment, price filters, age selection, or any value where the exact number is less important than the relative position. The selected value is not always visible, so it is good practice to display it using JavaScript. Range inputs provide an intuitive, visual way to select values.
Code Solution
SolutionRead Only
<!-- Basic range slider -->
<form>
<label for="volume">Volume:</label>
<input type="range"
id="volume"
name="volume"
min="0"
max="100"
value="50">
</form>
<!-- Price range filter -->
<form>
<label for="price">Maximum Price: $<span id="price-value">500</span></label>
<input type="range"
id="price"
name="max_price"
min="0"
max="1000"
step="50"
value="500">
</form>
<!-- Age selector -->
<form>
<label for="age">Age: <span id="age-display">25</span></label>
<input type="range"
id="age"
name="age"
min="18"
max="100"
value="25">
</form>
<!-- Rating slider -->
<form>
<label for="rating">Rate this product (1-5):</label>
<input type="range"
id="rating"
name="rating"
min="1"
max="5"
step="1"
value="3">
</form>