Blaze UI Basic Ranges

Last Updated : 21 Apr, 2022

Blaze UI is a free open-source Ui toolkit that provides a strong and maintainable foundation to develop scalable web solutions. All the components of Blaze UI are developed mobile-first and rely on native browser features, not on any additional library or framework.

In this article, we will be seeing Blaze UI Basic Ranges. Ranges are basically sliders that are used to take the value input between a definite range. To make a Blaze UI range we use the <input> element with class c-range and the type attribute set to the range.

Blaze UI Basic Ranges Classes:

c-range: This class is used to instantiate the Blaze UI range element.

Syntax:

<input class="c-range" type="range">

Example 1: The below example shows how to make a basic range in Blaze UI.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
    <title>Blaze UI - Basic Range</title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@10.0.4/dist/blaze/blaze.css"> 
  
    <style> 
        body { 
            font-family: sans-serif; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="u-centered"> 
        <h2 style="color: green;"> 
            GeeksforGeeks 
        </h2> 
          
        <h3>Basic Range - Blaze UI</h3> 
    </div> 
  
    <div class="u-window-box-super"> 
        <input type="range" class="c-range"> 
    </div> 
</body> 
  
</html>