Welcome to our HTML tutorial! Today, we're diving into the HTML range slider, a versatile input type for user interaction. Learn how to implement input type="range" for intuitive numerical selections on your web pages. This guide covers everything from basic setup to customizing its appearance.

Range slider (<input type="range">)

The HTML range slider creates an interactive control that allows users to specify a numerical value within a predefined range. It's perfect for settings like volume control, price filters, or zoom levels. This input type provides a visual slider for easy value selection, enhancing user experience.

Example 1: Basic Range Slider

<label for="volume">Volume:</label>
<input type="range" id="volume" name="volume" min="0" max="100">

Explanation This code snippet defines a simple range slider. The min and max attributes set the boundaries of the selectable values, making it ideal for a "volume" control from 0 to 100.

Example 2: Range Slider with a Default Value

<label for="brightness">Brightness:</label>
<input type="range" id="brightness" name="brightness" min="0" max="100" value="50">

Explanation Here, we add the value attribute to set a default starting point for the slider. This is useful for providing an initial setting, like a default brightness level.

Example 3: Range Slider with Step Increments

<label for="quantity">Quantity (increments of 10):</label>
<input type="range" id="quantity" name="quantity" min="0" max="100" step="10">

Explanation The step attribute in this example defines the increment by which the slider's value changes. This is useful when you want users to select values that are multiples of a specific number, such as quantities in steps of 10.

Example 4: Range Slider with Output Display

<label for="priceRange">Price Range:</label>
<input type="range" id="priceRange" name="priceRange" min="0" max="1000" oninput="this.nextElementSibling.value = this.value">
<output for="priceRange">500</output>

Explanation This example demonstrates how to display the selected value from the range slider in real-time. The oninput event updates the content of the <output> element, providing immediate feedback to the user.

Example 5: Range Slider with Labels for Min/Max

<p>
  <label for="zoom">Zoom Level:</label>
  <input type="range" id="zoom" name="zoom" min="0" max="200" value="100">
</p>
<div style="display: flex; justify-content: space-between; width: 200px;">
  <span>Min (0%)</span>
  <span>Max (200%)</span>
</div>

Explanation This code snippet shows how to add external labels to indicate the minimum and maximum values of the range slider. While not part of the input tag itself, it enhances usability by providing clear visual cues for the slider's range.