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 Basic Range is used to create the range slider to set any value by dragging the handle. To create the basic range, we will use the below classes.
Onsen UI CSS Component Basic Range Classes:
- range: This class is used to create the range.
- range__input: This class is used to create the range input.
- range__focus-ring: This class is used to create the focusing ring in the range.
- range–disabled: This class is used to disable the range.
Syntax:
<div class="range">
<input type="range"
class="range__input">
<input type="range"
class="range__focus-ring">
</div>Example 1: The following example demonstrates the Onsen UI CSS Component Basic 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 Basic Range
</h3>
<div class="range">
<input type="range" class="range__input">
<input type="range" class="range__focus-ring">
</div>
</center>
</body>
</html>
|
Output:
Example 2: The following example demonstrates the Onsen UI CSS Component Basic 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 Basic Range
</h3>
<strong>
Disabled Range
</strong>
<br>
<div class="range range--disabled">
<input type="range" class="range__input" disabled>
<input type="range" class="range__focus-ring" disabled>
</div>
</center>
</body>
</html>
|
Output:
Reference: https://onsen.io/v2/api/css.html#range-category