Bars

Bars represent the progress of a task or the value within the known range. Bars are custom components for displaying HTML5 <progress>, <meter> and input range elements.

Add a container element with the bar class. And add child elements with the bar-item class. The width percentage value is needed for every bar-item.

There is the bar-sm class for thinner Bars. Also, you could use Tooltips for any bar-item.

<!-- normal bars -->
<div class="bar bar-sm">
  <div class="bar-item" role="progressbar" style="width:25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<!-- multi-bars -->
<div class="bar">
  <div class="bar-item tooltip" data-tooltip="25%" style="width:25%;">25%</div>
  <div class="bar-item" style="width:15%;background:#818bd5;">15%</div>
</div>

Slider bars

You can add the bar-slider class to the Bars container. And add child elements with the bar-item class and bar-slider-btn inside bar-item. You need to set the bar-item width manually to have the slider point.

See the experimental Slider component for an interactive version.

If there are two bar-item divs in one bar-slider, you will have a range slider.

<!-- normal slider -->
<div class="bar bar-slider">
  <div class="bar-item" role="progressbar" style="width:25%;">
    <button class="bar-slider-btn btn" role="slider"></button>
  </div>
</div>

<!-- range slider -->
<div class="bar bar-slider">
  <div class="bar-item" role="progressbar" style="width:15%;">
    <button class="bar-slider-btn btn" role="slider"></button>
  </div>
  <div class="bar-item" role="progressbar" style="width:65%;">
    <button class="bar-slider-btn btn" role="slider"></button>
  </div>
</div>