Bootstrap 5 Range
Range
Use our custom range inputs for consistent cross-browser styling and built-in customization.
🤖 Looking for the LLM-optimized version? View llm.md
Other frameworks
CoreUI components are available as native Angular, React, and Vue components. To learn more please visit the following pages.
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