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=
<link rel="stylesheet" href=
<script src=
</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=
<link rel="stylesheet" href=
<script src=
</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>
|
Output:
Reference: https://onsen.io/v2/api/css.html#range-category