Blaze UI Color 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 Color Ranges. There are five classes that can be used in addition to the c-range class to change the color of the range components. These classes are listed below.

Blaze UI Color Ranges Classes:

c-range–brand: This class is used to change the color of the range to the brand color.
c-range–info: This class is used to change the color of the range to the info color.
c-range–warning: This class is used to change the color of the range to the warning color.
c-range–success: This class is used to change the color of the range to the success color.
c-range–error: This class is used to change the color of the range to the error color.

Syntax:

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

Example 1: This example describes the use of range color modifier classes to change the color of the range component. The range component can be disabled by using the disabled attribute. The disabled range component does not show any color even if the color modifier classes are present on the component.

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 - Color Range</title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@10.0.4/dist/blaze/blaze.css"> 
  
    <style> 
        body { 
            font-family: sans-serif; 
            text-align: center; 
        } 
    </style> 
</head> 
  
<body> 
    <h2 style="color:green;"> 
        GeeksforGeeks 
    </h2> 
          
    <h3>Color Range - Blaze UI</h3> 
      
    <div class="u-window-box-super"> 
        <p>Default Colored Range</p> 
        <input type="range" class="c-range"> 
        <p>Brand Colored Range</p> 
        <input type="range" class="c-range c-range--brand"> 
        <p>Error Colored Range</p> 
        <input type="range" class="c-range c-range--error"> 
        <p>Info Colored Range</p> 
        <input type="range" class="c-range c-range--info"> 
        <p>Warning Colored Range</p> 
        <input type="range" class="c-range c-range--warning"> 
        <p>Success Colored Range</p> 
        <input type="range" class="c-range c-range--success"> 
    </div> 
</body> 
  
</html>

Output:

Example 2: This example shows how to disable the range component and removes the effect of color modifier classes.

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 - Color Range</title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@10.0.4/dist/blaze/blaze.css"> 
  
    <style> 
        body { 
            font-family: sans-serif; 
            text-align: center; 
        } 
    </style> 
</head> 
  
<body> 
    <h2 style="color:green;"> 
        GeeksforGeeks 
    </h2> 
  
    <h3>Color Range - Blaze UI</h3> 
  
    <div class="u-window-box-super"> 
        <h4>Active Color Ranges</h4> 
        <input type="range" class="c-range c-range--error"> 
        <input type="range" class="c-range c-range--warning"> 
  
        <h4>Disabled Color Ranges</h4> 
        <input type="range" class="c-range  
            c-range--error" disabled> 
        <input type="range" class="c-range  
            c-range--warning" disabled> 
    </div> 
</body> 
  
</html>