@collab-ui/core/scss/components/slider/examples/step.html

Cisco Collab UI CSS Framework

<div class="cui-slider ">
  <span class="cui-slider__bar"></span>
  <span class="cui-slider__selection" style="width: 10%; left: 30%;"></span>
  <div class="cui-slider__pointer" role="button" tabindex="0" style="left: calc(30%);"></div>
  <div class="cui-slider__pointer" role="button" tabindex="0" style="left: calc(40%);"></div>
  <div>
    <span class="cui-slider__hashlabel" style="left: calc(0% - 4px);">0</span>
    <span class="cui-slider__hashlabel" style="left: calc(20% - 12px);">100</span>
    <span class="cui-slider__hashlabel" style="left: calc(40% - 12px);">200</span>
    <span class="cui-slider__hashlabel" style="left: calc(60% - 12px);">300</span>
    <span class="cui-slider__hashlabel" style="left: calc(80% - 12px);">400</span>
    <span class="cui-slider__hashlabel" style="left: calc(100% - 12px);">500</span>
  </div>
</div>