Onsen UI Range CSS Components

Last Updated : 28 Jun, 2022

In this article, we will learn how to include range into your webpage using the Onsen UI CSS. Onsen UI CSS is used to create beautiful HTML components. It is one of the most efficient ways to create HTML5 hybrid components that are compatible with both mobile and desktop.

Range CSS Components are used to set the value between initial and final values.

Syntax:

<element-name class="class-name">...<element-name>

Range CSS Components class used:

range__input: This class is used to create a range line on which the ring will run from the initial point to the final point.
range__focus-ring: This class is used to create a ring on clicking this ring the user will be able to set the range.

Example 1: In the below code we will see how to include range into the webpage.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href=
        "https://unpkg.com/onsenui/css/onsenui.css" />
    <link rel="stylesheet" href=
"https://unpkg.com/onsenui/css/onsen-css-components.min.css" />
    <script src="https://unpkg.com/onsenui/js/onsenui.min.js">
    </script>
 
    <style>
        body {
            background-color: lightgrey;
        }
 
        #heading {
            color: green;
        }
 
        #title {
            font-style: bold;
        }
    </style>
</head>
 
<body>
    <center>
        <h1 id="heading">
            GeeksforGeeks
        </h1>
        <h3>A computer science portal for geeks</h3>
        <strong id="title">
            Onsen UI CSS Component
        </strong>
        <br><br>
 
        <div class="range">
            <input type="range" class="range__input">
            <input type="range" class="range__focus-ring">
        </div>
    </center>
</body>
 
</html>

Output:

Example 2: In the below code, we will see how to include range into the webpage but it will not move because we are going to use disable property to disable the range.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href=
        "https://unpkg.com/onsenui/css/onsenui.css" />
    <link rel="stylesheet" href=
"https://unpkg.com/onsenui/css/onsen-css-components.min.css" />
    <script src="https://unpkg.com/onsenui/js/onsenui.min.js">
    </script>
 
    <style>
        body {
            background-color: lightgrey;
        }
 
        #heading {
            color: green;
        }
 
        #title {
            font-style: bold;
        }
    </style>
</head>
 
<body>
    <center>
        <h1 id="heading">
            GeeksforGeeks
        </h1>
        <h3>A computer science portal for geeks</h3>
        <strong id="title">
            Onsen UI CSS Component
        </strong>
        <br><br>
 
        <div class="range">
            <input type="range" class="range__input" disabled>
            <input type="range" class="range__focus-ring" disabled>
        </div><br><br>
        <div class="range">
            <input type="range" class="range__input">
            <input type="range" class="range__focus-ring">
        </div>
    </center>
</body>
 
</html>