Color Variants

The thumb color is set per-instance with a range-[color] class, matching the theme's brand palette.

HTML Code

<input type="range" class="custom-range range-primary" min="0" max="100" value="50">

Class Reference

Class	Value
class="custom-range range-[value]"	primary | success | warning | danger | info | teal | indigo | purple | pink | orange | dark

Dual-Handle Ranges

Min/max ranges built from a synced pair of native sliders, since a single native range input only exposes one handle.

Javascript Code

function syncDualRange(minEl, maxEl, outEl, prefix) {
  function update() {
    if (+minEl.val() > +maxEl.val()) minEl.val(maxEl.val());
    outEl.text(prefix + minEl.val() + ' - ' + prefix + maxEl.val());
  }
  minEl.on('input', update);
  maxEl.on('input', function () {
    if (+maxEl.val() < +minEl.val()) maxEl.val(minEl.val());
    update();
  });
}