Spectre Slider Bars

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@0.5.9/dist/spectre.min.css">
    <link rel="stylesheet" href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-exp.min.css">
    <link rel="stylesheet" href=
"https://unpkg.com/spectre.css@0.5.9/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>

Output:

Reference: https://picturepan2.github.io/spectre/components/bars.html#bars-slider

Explore