How do I style a range input with labels at 0, 50, and 100?

Asked on Jul 17, 2025

1 Answer

To style a range input with labels at specific values like 0, 50, and 100 using Bootstrap 5, you can use a combination of Bootstrap's form-range class and custom labels. Here's a simple example:

<!-- BEGIN COPY / PASTE -->
        <div class="container">
            <label for="customRange" class="form-label">Example Range</label>
            <input type="range" class="form-range" id="customRange" min="0" max="100" step="1">
            <div class="d-flex justify-content-between">
                <span>0</span>
                <span>50</span>
                <span>100</span>
            </div>
        </div>
        <!-- END COPY / PASTE -->

Additional Comment:

The `form-range` class is used to style the range input.
The `d-flex` and `justify-content-between` classes are used to evenly distribute the labels.
Labels are manually placed using `` elements for each desired value.

✅ Answered with Bootstrap 5 best practices.

← Back to All Questions