Spectre Slider Bars

Last Updated : 30 Jan, 2022

The Spectre Slider bars are used to create progress bars in slider mode.

You can add the bar-slider class to the Bars container. Add child elements with the bar-item class and add class bar-slider-btn for the button inside div with class bar-item. You also need to add bar-item width manually to set the slider point.

If there are two div with class bar-item in one bar-slider, you can have a range slider.

Spectre Slider Bars Class:

bar: This class is used to create a bar.
bar-slider: This class is used to create the bar in slider mode.
bar-item: This class is used to set the child element.
bar-slider-btn: This class is used to set the button bar slider.

Syntax:

<div class="bar bar-slider">
    <div class="bar-item">
        <button class="bar-slider-btn btn">
            ....
        </button>
    </div>
</div>

Example: In this example, we will use two slider bars, one with a range and another one will be the normal slider bar. These bars are not responses.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" href= 
"https://unpkg.com/spectre.css/dist/spectre.min.css"> 
    <link rel="stylesheet" href= 
"https://unpkg.com/spectre.css/dist/spectre-exp.min.css"> 
    <link rel="stylesheet" href= 
"https://unpkg.com/spectre.css/dist/spectre-icons.min.css"> 
    <style> 
        .bar { 
            margin-left: 15%; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h1 class="text-success">GeeksforGeeks</h1> 
        <strong>SPECTRE Slider bars Class</strong> 
    </center> 
    <br> 
    <strong>Range Slider Bars:</strong> 
    <div class="bar bar-slider"> 
      <div class="bar-item" 
           style="width:10%;"> 
        <button class="bar-slider-btn btn"> 
            <br>Minimum 
        </button> 
      </div> 
      <div class="bar-item" 
           style="width:75%;"> 
        <button class="bar-slider-btn btn"> 
            <br>Maximum 
        </button> 
      </div> 
    </div> 
    <br> 
    <strong>Slider Bars:</strong> 
    <div class="bar bar-slider"> 
    <div class="bar-item" 
         style="width:75%;"> 
      <button class="bar-slider-btn btn"> 
          <br>75% 
      </button> 
    </div> 
</div> 
</body> 
</html>