HTML Range defaultValue Property: Set the Initial Range Input Value

The HTML range input, represented by the <input type="range"> element, allows users to select a numeric value within a specified range. The defaultValue property in HTML is used to set the initial value of the range input when the page loads. This property is particularly useful when you want the range input to start with a specific value, providing a better user experience by pre-setting a reasonable or common value.

What is the defaultValue Property?

The defaultValue property specifies the default value for a range input. This value is the one that the input will have when the page initially loads or when the form is reset. It is different from the value property, which reflects the current value of the input as the user interacts with it.

Purpose of the defaultValue Property

• Setting Initial Values: Provides an initial value for the range input when the page loads.
• Resetting Forms: Specifies the value to which the range input reverts when a form is reset.
• Improving User Experience: Offers a pre-selected value that aligns with common or expected user choices.

Syntax

The defaultValue property can be set directly in the HTML tag or manipulated via JavaScript.

HTML:

<input type="range" id="myRange" min="0" max="100" defaultValue="50">

JavaScript:

const rangeInput = document.getElementById("myRange");
rangeInput.defaultValue = "50";

Attributes Table

The defaultValue property does not have any specific attributes but works in conjunction with other range input attributes like min and max.

Attribute	Type	Description
`type`	String	Specifies the type of the input element. For range inputs, it should be set to `”range”`.
`id`	String	A unique identifier for the range input, used to access it via JavaScript.
`min`	Number	Specifies the minimum value allowed for the range input.
`max`	Number	Specifies the maximum value allowed for the range input.
`defaultValue`	String	Specifies the initial value of the range input when the page loads or the form is reset.
`value`	String	Represents the current value of the range input as the user interacts with it.

Note: The defaultValue is initially a string, but the range input treats it as a number. Ensure the value is within the min and max range. 💡

Examples

Let’s explore some practical examples of using the defaultValue property with HTML range inputs.

Basic Usage

This example demonstrates how to set the defaultValue directly in the HTML.

<label for="volumeRange">Volume:</label>
<input
  type="range"
  id="volumeRange"
  min="0"
  max="100"
  defaultValue="70"
  style="width: 300px;"
/>
<p>
  Volume: <span id="volumeValue"></span>
</p>

<script>
  const volumeRange_basic = document.getElementById("volumeRange");
  const volumeValue_basic = document.getElementById("volumeValue");

  volumeValue_basic.textContent = volumeRange_basic.defaultValue; // Display default value initially

  volumeRange_basic.addEventListener("input", function () {
    volumeValue_basic.textContent = volumeRange_basic.value; // Update display on input
  });
</script>

In this example, the range input starts with a default volume of 70.

Setting defaultValue with JavaScript

Here, we set the defaultValue using JavaScript after the page has loaded.

<label for="brightnessRange">Brightness:</label>
<input
  type="range"
  id="brightnessRange"
  min="0"
  max="100"
  style="width: 300px;"
/>
<p>
  Brightness: <span id="brightnessValue"></span>
</p>

<script>
  const brightnessRange_js = document.getElementById("brightnessRange");
  const brightnessValue_js = document.getElementById("brightnessValue");

  brightnessRange_js.defaultValue = "30"; // Set default value using JavaScript
  brightnessValue_js.textContent = brightnessRange_js.defaultValue; // Display default value initially

  brightnessRange_js.addEventListener("input", function () {
    brightnessValue_js.textContent = brightnessRange_js.value; // Update display on input
  });
</script>

In this example, JavaScript sets the default brightness to 30.

Resetting the Form

This example shows how the defaultValue is used when a form is reset.

<form id="myForm">
  <label for="contrastRange">Contrast:</label>
  <input
    type="range"
    id="contrastRange"
    min="0"
    max="100"
    defaultValue="50"
    style="width: 300px;"
  />
  <p>
    Contrast: <span id="contrastValue"></span>
  </p>
  <button type="reset">Reset</button>
</form>

<script>
  const contrastRange_reset = document.getElementById("contrastRange");
  const contrastValue_reset = document.getElementById("contrastValue");
  const myForm_reset = document.getElementById("myForm");

  contrastValue_reset.textContent = contrastRange_reset.defaultValue; // Display default value initially

  contrastRange_reset.addEventListener("input", function () {
    contrastValue_reset.textContent = contrastRange_reset.value; // Update display on input
  });

  myForm_reset.addEventListener("reset", function () {
    contrastValue_reset.textContent = contrastRange_reset.defaultValue; // Reset display to default value
  });
</script>

Clicking the “Reset” button will revert the range input to its defaultValue of 50.

Dynamic defaultValue Based on Conditions

This example demonstrates setting the defaultValue based on certain conditions.

<label for="temperatureRange">Temperature:</label>
<input
  type="range"
  id="temperatureRange"
  min="0"
  max="100"
  style="width: 300px;"
/>
<p>
  Temperature: <span id="temperatureValue"></span>
</p>

<script>
  const temperatureRange_dynamic = document.getElementById("temperatureRange");
  const temperatureValue_dynamic = document.getElementById("temperatureValue");

  // Determine default value based on time of day
  const currentHour = new Date().getHours();
  let defaultTemperature = currentHour > 18 || currentHour < 6 ? "30" : "70"; // Night or day

  temperatureRange_dynamic.defaultValue = defaultTemperature;
  temperatureValue_dynamic.textContent =
    temperatureRange_dynamic.defaultValue; // Display default value initially

  temperatureRange_dynamic.addEventListener("input", function () {
    temperatureValue_dynamic.textContent = temperatureRange_dynamic.value; // Update display on input
  });
</script>

The default temperature is set to 30 during the night (6 PM to 6 AM) and 70 during the day. 🌞🌙

Real-World Applications

The defaultValue property is valuable in scenarios like:

• Preference Settings: Providing a reasonable default value for user preferences such as volume, brightness, or contrast.
• Configuration Options: Setting initial configurations for various settings.
• Surveys and Forms: Pre-filling a common or expected value in survey questions.

Browser Support

The defaultValue property is supported by all modern browsers.

Note: Always test your implementation across different browsers to ensure consistent behavior. 🧐

Conclusion

The defaultValue property of the HTML range input is essential for setting the initial value of the input, providing a better user experience and ensuring forms are reset to a sensible state. By using the examples and guidelines provided, you can effectively implement and utilize the defaultValue property in your web development projects. Happy coding! 🚀