2.33.1 #Components.slider.range Range Slider

Toggle example guides Toggle HTML markup

Sliders can have icons on both ends of the bar that reflect a range of values.

Browser support: IE9+, Safari6+, Firefox30+, Chrome30+

Default styling
0
2
10
10
.sb-input-range--disabled
disabled
0
2
10
10
.sb-input-range__label--hide
hide label values
0
2
10
10
Markup 
<div class="sb-input-range [modifier class]">
  <span class="sb-input-range__label sb-input-range__label--min">
    <span class="sb-input-range__label-container">0</span>
  </span>
  <div class="sb-input-range__track sb-input-range__track--background">
    <div class="sb-input-range__track sb-input-range__track--active" style="left: 20%; width: 80%;">
    </div>
    <span class="sb-input-range__slider-container" style="position: absolute; left: 20%;">
      <span class="sb-input-range__label sb-input-range__label--value">
        <span class="sb-input-range__label-container">2</span>
      </span>
      <div aria-valuemax="10" aria-valuemin="0" aria-valuenow="2" class="sb-input-range__slider" draggable="false" role="slider" tabindex="0">
      </div>
    </span>
    <span class="sb-input-range__slider-container" style="position: absolute; left: 100%;">
      <span class="sb-input-range__label sb-input-range__label--value">
        <span class="sb-input-range__label-container">10</span>
      </span>
      <div aria-valuemax="10" aria-valuemin="2" aria-valuenow="10" class="sb-input-range__slider" draggable="false" role="slider" tabindex="0">
      </div>
    </span>
  </div>
  <span class="sb-input-range__label sb-input-range__label--max">
    <span class="sb-input-range__label-container">10</span>
  </span>
</div>
Source: components/_slider.scss, line 201