DEV Community

swetha palani
swetha palani

Posted on

RANGE TYPE IN JAVASCRIPT

The Input Range object represents an HTML element with type="range".

It is basically a slider control that lets users select a value from a range.

SYNTAX

<input type="range" id="myRange" min="0" max="100" value="50" step="5">

Enter fullscreen mode Exit fullscreen mode

ATTRIBUTES:

min → Minimum value (default 0)

max → Maximum value (default 100)

value → Current value (default midpoint)

step → Increment steps (default 1)

EXAMPLE:

<!DOCTYPE html>
<html>
<head>
  <title>Font Size Changer</title>
</head>
<body>
  <p id="myText">dynamic font size changer</p>

  <input type="range" min="10" max="50" value="16" oninput="changeFontSize(this.value)">

  <script>
    function changeFontSize(size) {
      document.getElementById("myText").style.fontSize = size + "px";
    }
  </script>
</body>
</html>

Enter fullscreen mode Exit fullscreen mode

Top comments (0)