Range Slider

A range slider lets users select a value from a defined range, often used for settings like volume, brightness, price filters, and more.

Horizontal Range Slider

  • 0
  • 1
  • 2
  • 3
  • 4
  • 5
<div class="rangeslider rangeslider--horizontal bg-gray" aria-valuemin="0" aria-valuemax="100" aria-valuenow="20" aria-orientation="horizontal">
  <div class="rangeslider--fill bg-primary" style="width: 800.5px;"></div>
  <div class="rangeslider--handle bg-primary" tabindex="0" style="left: 800.5px;">
    <div class="rangeslider--handle--icon">
      <div class="vertical-bar first"></div>
      <div class="vertical-bar second"></div>
      <div class="vertical-bar third"></div>
    </div>
  </div>
  <ul class="rangeslider--labels">
    <li class="rangeslider--label-item" data-value="0" style="left: 40px;">0</li>
    <li class="rangeslider--label-item" data-value="20" style="left: 251.5px;">1</li>
    <li class="rangeslider--label-item" data-value="40" style="left: 525.5px;">2</li>
    <li class="rangeslider--label-item" data-value="60" style="left: 800.5px;">3</li>
    <li class="rangeslider--label-item" data-value="80" style="left: 1074.5px;">4</li>
    <li class="rangeslider--label-item" data-value="100" style="left: 1349.5px;">5</li>
  </ul>
</div>