Blaze UI is a user interface toolkit that helps developers to build maintainable websites by using its components. All of its components are mobile-first and scale accordingly based on screen size.
Blaze UI Ranges are known as sliders, basically, it is used to specify the range of values when we drag the slider. We can create the slider to set the range and users can choose any value by dragging the slider.
Blaze UI Ranges Classes:
- c-range: This class is used to add the Blaze UI Range.
Syntax:
<input type="range" class="c-range">
Example 1: The following code demonstrates the Blaze UI Ranges.
HTML
<!DOCTYPE html> <html>
<head>
<script type="module" src=
</script>
<script nomodule="" src=
</script>
<link rel="stylesheet" href=
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>Blaze UI Ranges</h3>
<input type="range" class="c-range">
</body>
</html>
|
Output:
Example 2: The following code demonstrates the Blaze UI Ranges with different colors.
HTML
<!DOCTYPE html> <html>
<head>
<script type="module" src=
</script>
<script nomodule="" src=
</script>
<link rel="stylesheet" href=
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>Blaze UI Ranges</h3>
<input type="range" class="c-range c-range--brand">
<input type="range" class="c-range c-range--info">
<input type="range" class="c-range" disabled>
<input type="range" class="c-range c-range--warning">
<input type="range" class="c-range c-range--success">
<input type="range" class="c-range c-range--error">
</body>
</html>
|
Output:
Reference: https://www.blazeui.com/components/ranges/