Onsen UI CSS Component Material Range

Last Updated : 30 Jun, 2022

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.

Onsen UI CSS Component Material Range is used to create the material range slider to set any value by dragging the handle. To create the material range, we will use the below classes.

Onsen UI CSS Component Material Range Classes:

range–material: This class is used to create the material range.
range–material__input: This class is used to create the material range input.
range–material__focus-ring: This class is used to create the material range focus.
range–disabled: This class is used to disable the material range.

Syntax:

<div class="range range--material">
  <input type="range" 
           class="range__input 
           range--material__input" 
           min="0" max="100">
</div>

Example 1: The following example demonstrates the Onsen UI CSS Component Material Range.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <!-- CDN links of Onsen UI library -->
    <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> 
</head> 
  
<body> 
    <center> 
        <h1 style="color: green;"> 
            GeeksforGeeks 
        </h1> 
        <h3> 
            Onsen UI CSS Component Material Range 
        </h3> 
  
        <div class="range range--material"> 
            <input type="range" 
                   class="range__input  
                   range--material__input"> 
        </div> 
    </center> 
</body> 
</html>

Output:

Example 2: The following example demonstrates the Onsen UI CSS Component Material Range.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <!-- CDN links of Onsen UI library -->
    <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> 
</head> 
  
<body> 
    <center> 
        <h1 style="color: green;"> 
            GeeksforGeeks 
        </h1> 
        <h3> 
            Onsen UI CSS Component Material Range 
        </h3> 
  
        <strong> 
            Disabled material range: 
        </strong> <br> 
        <div class="range range--material  
                    range--disabled"> 
            <input type="range" 
                   class="range__input  
                   range--material__input"> 
        </div> 
    </center> 
</body> 
</html>