Blaze UI Ranges
Last Updated :
29 Apr, 2022
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/
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...