is now part of Shuffle™. The new editor includes templates for Bootstrap, Bulma, Material-UI, and Tailwind CSS.
Switch to Shuffle →
← all Bootstrap classes list

Bootstrap class: .custom-range

<label for="customRange1">Basic range</label>
<input type="range" class="custom-range" id="customRange1">
<label class="mt-3" for="customRange3">Range with steps</label>
<input type="range" class="custom-range" min="0" max="5" step="0.5" id="customRange3">

Preview

Tips 💡

You don't need to remember all CSS classes. Just use the Bootstrap Editor instead.

Sass source

/* _custom-forms.scss:315 */
.custom-range {
  width: 100%;
  padding-left: 0; // Firefox specific
  background-color: transparent;
  appearance: none;

  &:focus {
    outline: none;

    // Pseudo-elements must be split across multiple rulesets to have an affect.
    // No box-shadow() mixin for focus accessibility.
    &::-webkit-slider-thumb { box-shadow: $custom-range-thumb-focus-box-shadow; }
    &::-moz-range-thumb     { box-shadow: $custom-range-thumb-focus-box-shadow; }
    &::-ms-thumb            { box-shadow: $custom-range-thumb-focus-box-shadow; }
  }

  &::-moz-focus-outer {
    border: 0;
  }

  &::-webkit-slider-thumb {
    width: $custom-range-thumb-width;
    height: $custom-range-thumb-height;
    margin-top: (($custom-range-track-height - $custom-range-thumb-height) / 2); // Webkit specific
    @include gradient-bg($custom-range-thumb-bg);
    border: $custom-range-thumb-border;
    @include border-radius($custom-range-thumb-border-radius);
    @include box-shadow($custom-range-thumb-box-shadow);
    @include transition($custom-forms-transition);
    appearance: none;

    &:active {
      @include gradient-bg($custom-range-thumb-active-bg);
    }
  }

  &::-webkit-slider-runnable-track {
    width: $custom-range-track-width;
    height: $custom-range-track-height;
    color: transparent; // Why?
    cursor: $custom-range-track-cursor;
    background-color: $custom-range-track-bg;
    border-color: transparent;
    @include border-radius($custom-range-track-border-radius);
    @include box-shadow($custom-range-track-box-shadow);
  }

  &::-moz-range-thumb {
    width: $custom-range-thumb-width;
    height: $custom-range-thumb-height;
    @include gradient-bg($custom-range-thumb-bg);
    border: $custom-range-thumb-border;
    @include border-radius($custom-range-thumb-border-radius);
    @include box-shadow($custom-range-thumb-box-shadow);
    @include transition($custom-forms-transition);
    appearance: none;

    &:active {
      @include gradient-bg($custom-range-thumb-active-bg);
    }
  }

  &::-moz-range-track {
    width: $custom-range-track-width;
    height: $custom-range-track-height;
    color: transparent;
    cursor: $custom-range-track-cursor;
    background-color: $custom-range-track-bg;
    border-color: transparent; // Firefox specific?
    @include border-radius($custom-range-track-border-radius);
    @include box-shadow($custom-range-track-box-shadow);
  }

  &::-ms-thumb {
    width: $custom-range-thumb-width;
    height: $custom-range-thumb-height;
    margin-top: 0; // Edge specific
    margin-right: $custom-range-thumb-focus-box-shadow-width; // Workaround that overflowed box-shadow is hidden.
    margin-left: $custom-range-thumb-focus-box-shadow-width;  // Workaround that overflowed box-shadow is hidden.
    @include gradient-bg($custom-range-thumb-bg);
    border: $custom-range-thumb-border;
    @include border-radius($custom-range-thumb-border-radius);
    @include box-shadow($custom-range-thumb-box-shadow);
    @include transition($custom-forms-transition);
    appearance: none;

    &:active {
      @include gradient-bg($custom-range-thumb-active-bg);
    }
  }

  &::-ms-track {
    width: $custom-range-track-width;
    height: $custom-range-track-height;
    color: transparent;
    cursor: $custom-range-track-cursor;
    background-color: transparent;
    border-color: transparent;
    border-width: ($custom-range-thumb-height * .5);
    @include box-shadow($custom-range-track-box-shadow);
  }

  &::-ms-fill-lower {
    background-color: $custom-range-track-bg;
    @include border-radius($custom-range-track-border-radius);
  }

  &::-ms-fill-upper {
    margin-right: 15px; // arbitrary?
    background-color: $custom-range-track-bg;
    @include border-radius($custom-range-track-border-radius);
  }
}

Uses variables

Code copied to the clipboard.

Copying failed

/* _custom-forms.scss:315 */
$custom-range-thumb-focus-box-shadow
$custom-range-thumb-focus-box-shadow
$custom-range-thumb-focus-box-shadow
$custom-range-thumb-width
$custom-range-thumb-height
$custom-range-track-height
$custom-range-thumb-height
$custom-range-thumb-bg
$custom-range-thumb-border
$custom-range-thumb-border-radius
$custom-range-thumb-box-shadow
$custom-forms-transition
$custom-range-thumb-active-bg
$custom-range-track-width
$custom-range-track-height
$custom-range-track-cursor
$custom-range-track-bg
$custom-range-track-border-radius
$custom-range-track-box-shadow
$custom-range-thumb-width
$custom-range-thumb-height
$custom-range-thumb-bg
$custom-range-thumb-border
$custom-range-thumb-border-radius
$custom-range-thumb-box-shadow
$custom-forms-transition
$custom-range-thumb-active-bg
$custom-range-track-width
$custom-range-track-height
$custom-range-track-cursor
$custom-range-track-bg
$custom-range-track-border-radius
$custom-range-track-box-shadow
$custom-range-thumb-width
$custom-range-thumb-height
$custom-range-thumb-focus-box-shadow-width
$custom-range-thumb-focus-box-shadow-width
$custom-range-thumb-bg
$custom-range-thumb-border
$custom-range-thumb-border-radius
$custom-range-thumb-box-shadow
$custom-forms-transition
$custom-range-thumb-active-bg
$custom-range-track-width
$custom-range-track-height
$custom-range-track-cursor
$custom-range-thumb-height
$custom-range-track-box-shadow
$custom-range-track-bg
$custom-range-track-border-radius
$custom-range-track-bg
$custom-range-track-border-radius

More in Bootstrap Custom Forms

Bootstrap 4 & 5