Categories
28°C, New York
Home CSS Onsen UI Range CSS Components

Onsen UI Range CSS Components

Onsen UI CSS Component Basic Range

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">
            w3wiki
        </h1>
        <h3>A computer science portal for Beginner</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">


            w3wiki


        </h1>


        <h3>A computer science portal for Beginner</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>



















                        







                        









													
													
												

												
												

													
													
Output:

													
													
												

												
												

													
													
 

													
													
												

												
												

													
													
Reference: https://onsen.io/v2/api/css.html#range-category

													
													
												

												
												

													
													

													
													
												

												
												

													
													

													
													
												

												
												

													
													

													
													
												

												
													
											

											
										

									

									

										
										
Tags:

										
										#Onsen-UI
										
										#Onsen-UI CSS-Components
										
										#CSS
										
										#Web Technologies
										
										

									

									

										

											
										

										

											
											
												Onsen UI CSS Component Basic Range