2.33 #Components.slider Slider

Toggle example guides Toggle HTML markup

Sliders allow users to make selections from a range of values

Sliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as rating.

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

The markup is generated from react-input-range, which is the library we use to implement the JS part of the slider. We update almost all classes that are generated by react-input-range so we can have full control of the styling and behavior. The reference implementation of the base styles scss can be found here.

JavaScript is required for:

  • The whole slider interaction - Changing and dragging slider.
  • Updating the slider values.
Default styling
0
0
10
0
3
10
.sb-input-range--disabled
disabled
0
0
10
0
3
10
.sb-input-range__label--hide
hide label values
0
0
10
0
3
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: 0%; width: 0%;">
    </div>
    <span class="sb-input-range__slider-container" style="position: absolute; left: 0%;">
      <span class="sb-input-range__label sb-input-range__label--value">
        <span class="sb-input-range__label-container">0</span>
      </span>
      <div aria-valuemax="10" aria-valuemin="0" aria-valuenow="0" 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>
<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: 0%; width: 30%;"></div>
    <span class="sb-input-range__slider-container" style="position: absolute; left: 30%;">
      <span class="sb-input-range__label sb-input-range__label--value">
        <span class="sb-input-range__label-container">3</span>
      </span>
      <div aria-valuemax="10" aria-valuemin="0" aria-valuenow="3" 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 1