Spectre Bars

Spectre Bars are used to represent the progress of the task, the value within the known range. Bars are components for displaying HTML5 <progress>, <meter> and input range elements.

In Spectre Bars, we have default bars and 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.

Spectre Bars Types:

• Spectre Slider Bars: These are used to create progress bars in slider mode.

Spectre Bars Classes:

• bar: This class is used to create default bar and slide bars.
• bar-slider: This class is used to create slider bars.

Syntax:

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

The below example illustrates the Spectre Bars.

Example 1:

Output:

👁 Image

Example 2: In this example, we will create slider bars.

Output:

👁 Image

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