How to Display the Value of an HTML5 Range Input Control?

How to Display Range Value in an Input Range Control in HTML5?

Using HTML5, you can create a range slider with its value readily displayed in a text box. This is particularly useful for providing real-time feedback to users. Here's a solution that leverages HTML5's native functionality without the need for JavaScript or jQuery:

<input type="range" value="24" min="1" max="100" oninput="this.nextElementSibling.value = this.value">
<output>24</output>

Here's a breakdown of the code:

• : This creates the range slider. Set the value attribute to specify the initial value.
• min and max: Define the minimum and maximum values for the slider.
• oninput: This event listener triggers every time the slider's value changes.
• nextElementSibling: Used to access the output element, which is the adjacent sibling of the input range.
• this.value: Represents the current value of the range input.
• : This element displays the value of the range input.

As you slide the range input, the oninput event fires, updating the value of the output element to reflect the current slide position. This provides a user-friendly interface where the exact value of the slider is always visible.

The above is the detailed content of How to Display the Value of an HTML5 Range Input Control?. For more information, please follow other related articles on the PHP Chinese website!