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.

Output:

👁 Spectre Slider Bars

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