Bootstrap 5 Range

Overview

Create custom <input type="range"> controls with .form-range. The track (the background) and thumb (the value) are both styled to appear the same across browsers. As only Firefox supports “filling” their track from the left or right of the thumb as a means to visually indicate progress, we do not currently support it.

<label for="customRange1" class="form-label">Example range</label>
<input type="range" class="form-range" id="customRange1">

Disabled

Add the disabled boolean attribute on an input to give it a grayed out appearance and remove pointer events.

<label for="disabledRange" class="form-label">Disabled range</label>
<input type="range" class="form-range" id="disabledRange" disabled>

Min and max

Range inputs have implicit values for min and max—0 and 100, respectively. You may specify new values for those using the min and max attributes.

<label for="customRange2" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="5" id="customRange2">

Steps

By default, range inputs “snap” to integer values. To change this, you can specify a step value. In the example below, we double the number of steps by using step="0.5".

<label for="customRange3" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3">

Customizing

SASS variables

$form-range-track-width:          100%;
$form-range-track-height:         .5rem;
$form-range-track-cursor:         pointer;
$form-range-track-bg:             var(--#{$prefix}secondary-bg);
$form-range-track-border-radius:  1rem;
$form-range-track-box-shadow:     var(--#{$prefix}box-shadow-inset);

$form-range-thumb-width:                   1rem;
$form-range-thumb-height:                  $form-range-thumb-width;
$form-range-thumb-bg:                      $component-active-bg;
$form-range-thumb-border:                  0;
$form-range-thumb-border-radius:           1rem;
$form-range-thumb-box-shadow:              0 .1rem .25rem rgba($black, .1);
$form-range-thumb-focus-box-shadow:        0 0 0 1px $body-bg, $input-focus-box-shadow;
$form-range-thumb-focus-box-shadow-width:  $input-focus-width; // For focus box shadow issue in Edge
$form-range-thumb-active-bg:               tint-color($primary, 70%);
$form-range-thumb-disabled-bg:             var(--#{$prefix}secondary-color);
$form-range-thumb-transition:              background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;

CoreUI vs Bootstrap

While this Form Range component is fully compatible with Bootstrap and follows its core principles, CoreUI delivers a more complete solution for modern app development.

What sets CoreUI apart from Bootstrap?

• ✅ Fully compatible with Bootstrap – Built directly on Bootstrap, all classes and behaviors work as expected.
• 🧠 Framework-native versions – CoreUI provides dedicated libraries for React.js, Vue.js, and Angular, unlike Bootstrap which relies on third-party plugins for JavaScript frameworks.
• 👨‍💻 Maintained by a full-time team – CoreUI is developed as a professional product, not a volunteer-driven project.
• 📦 More built-in components – Includes additional ready-to-use components like range sliders, multi-selects, steppers, etc.
• 🛠️ Sass Modules support today – CoreUI already supports Sass Modules, which are planned for Bootstrap 6.
• 🌍 Better LTR/RTL support – Uses modern CSS logical properties for seamless bidirectional layout support.
• 🔒 LTS (Long-Term Support) – Bootstrap now offers LTS only via paid third parties like HeroDevs, while CoreUI continues to offer long-term support natively and for free.

Whether you’re building internal tools, dashboards, or SaaS platforms — CoreUI combines the familiarity of Bootstrap with a more powerful, scalable, and production-ready ecosystem.

👉 Explore CoreUI Bootstrap Components
👉 Compare CoreUI vs Bootstrap