Range

Use our custom range inputs for consistent cross-browser styling and built-in customization.

https://getbootstrap.com/docs/5.1/forms/range/

Range Examples

Preview
HTML

Overview

Min and Max

Steps

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

                    <div>
                      <label for="customRange2" class="form-label">Min and Max</label>
                      <input type="range" class="form-range" min="0" max="5" id="customRange2">
                    </div>

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