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.

• Angular Range
• React Range
• Vue 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.

<labelfor="customRange1"class="form-label">Example range</label><inputtype="range"class="form-range"id="customRange1">

Disabled

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

<labelfor="disabledRange"class="form-label">Disabled range</label><inputtype="range"class="form-range"id="disabledRange"disabled>

Min and max

Range inputs have implicit values formin andmax—0 and100, respectively. You may specify new values for those using themin andmax attributes.

<labelfor="customRange2"class="form-label">Example range</label><inputtype="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 astep value. In the example below, we double the number of steps by usingstep="0.5".

<labelfor="customRange3"class="form-label">Example range</label><inputtype="range"class="form-range"min="0"max="5"step="0.5"id="customRange3">

Output value

The value of the range input can be shown using theoutput element and a bit of JavaScript.

<labelfor="customRange4"class="form-label">Example range</label><inputtype="range"class="form-range"min="0"max="100"value="50"id="customRange4"><outputfor="customRange4"id="rangeValue"aria-hidden="true"></output><script>// This is an example script, please modify as neededconstrangeInput=document.getElementById('customRange4');constrangeOutput=document.getElementById('rangeValue');// Set initial valuerangeOutput.textContent=rangeInput.value;rangeInput.addEventListener('input',function(){rangeOutput.textContent=this.value;});</script>

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.25remrgba($black,.1);$form-range-thumb-focus-box-shadow:0001px$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.15sease-in-out,border-color.15sease-in-out,box-shadow.15sease-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 forReact.js,Vue.js, andAngular, 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