How to Display Range Value Using Only HTML and CSS?

Displaying Range Value Using HTML5 input type range

Creating a website with a range slider offers a convenient way to adjust values. However, it may be beneficial to display the current slide value in a textbox for easier reference. While jQuery provides a straightforward solution, it is possible to achieve this functionality using only HTML and CSS.

Solution:

To effortlessly display the current range value without JavaScript, implement the following HTML code:

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

In this code:

• The element defines the range slider with attributes for its value, minimum, and maximum values.
• The oninput event listener updates the value of the adjacent sibling output element whenever the range slider is adjusted.
• The
  element displays the current range value.

Utilizing this method, you can easily display the range value in a textbox without the need for external scripts.

The above is the detailed content of How to Display Range Value Using Only HTML and CSS?. For more information, please follow other related articles on the PHP Chinese website!