HTML Range Input

by

HTML range inputs allow users to select a numeric value by moving a slider. They are commonly used for volume controls, price filters, brightness settings, ratings, and other interactive features. HTML provides the <input type="range"> element to create a range slider.

What Is an HTML Range Input?

An HTML range input is a form control that lets users select a value within a specified range. Instead of typing a number, users drag a slider or adjust it using their keyboard.

For example, an online shopping website can use a range input to let users filter products by price.

To understand other form controls, explore HTML Input and HTML Input Types.

HTML Range Input Example

The following example demonstrates how to create a basic range slider.

<form>
  <label for="volume">Volume:</label>

  <input
    type="range"
    id="volume"
    name="volume"
    min="0"
    max="100"
    value="50"
  >

  <button type="submit">Submit</button>
</form>

In this example:

  • type="range" creates the slider.
  • min="0" sets the minimum value.
  • max="100" sets the maximum value.
  • value="50" sets the initial slider position.
  • name="volume" identifies the field in submitted form data.

The slider starts at 50 and allows users to select values between 0 and 100.

Important Attributes of HTML Range Input

HTML range inputs support several useful attributes.

  • min defines the lowest permitted value.
  • max defines the highest permitted value.
  • step specifies the permitted increments.
  • value sets the initial value.
  • name identifies the field when form data is submitted.
  • disabled prevents users from interacting with the slider.

For example, a price filter might use a range from ₹100 to ₹10,000.

<label for="price">Select Maximum Price:</label>

<input
  type="range"
  id="price"
  name="price"
  min="100"
  max="10000"
  step="100"
  value="5000"
>

The step="100" attribute makes the slider move in increments of 100.

Learn more about HTML Form Attributes and HTML Form Elements.

Displaying the Selected Range Value

A range slider does not automatically display its current numeric value as text in a separate location. You can use JavaScript to show the selected value while the user moves the slider.

<label for="rating">Rating:</label>

<input
  type="range"
  id="rating"
  min="1"
  max="10"
  value="5"
>

<p>Selected Rating: <span id="value">5</span></p>

<script>
  const slider = document.getElementById("rating");
  const output = document.getElementById("value");

  slider.addEventListener("input", function () {
    output.textContent = slider.value;
  });
</script>

When users move the slider, the displayed rating updates immediately.

Styling HTML Range Inputs with CSS

CSS allows you to customize the slider’s width and accent color.

<style>
  input[type="range"] {
    width: 100%;
    accent-color: #007bff;
    cursor: pointer;
  }
</style>

The width property controls the slider’s width, while accent-color changes its accent color in supported browsers.

HTML Range Input vs Number Input

A range input is best when users should select a value visually using a slider. A number input is more suitable when users need to type an exact number.

For example, a volume control works well with a range slider, while entering an exact product quantity may be easier with a number input. Learn more about HTML Number Input.

Frequently Asked Questions

What is the default value of a range input?

If you do not specify a value, the browser generally uses the midpoint between the minimum and maximum values, subject to the permitted step.

Can I set minimum and maximum values?

Yes. Use the min and max attributes to define the slider’s range.

Can a range input display its selected value?

Yes. Use JavaScript to update a text element whenever the slider’s input event occurs.

Is a range input suitable for exact numerical entry?

It is usually better for approximate or visual selection. Use a number input when users need to enter precise values directly.