Bootstrap 5.3 Range Slider: Create Interactive Range Input Controls

In Bootstrap 5.3, you can use the class "form-range" to create an input box with a range slider. Here's an example:

Input Range Control

We have added a <label> element with the "form-label" class. The label provides a description or instruction for the range input.

The <input> element includes additional attributes:

min: Specifies the minimum value of the range input. In this case, the minimum value is set to 0.
max: Specifies the maximum value of the range input. Here, the maximum value is set to 100.
step: Specifies the increment value when adjusting the range. With a step value of 5, the range will change in increments of 5.
value: Sets the initial value of the range input. The value is set to 50, so the range slider will start at the midpoint.

By using these attributes, you can define the range of values, the step size, and the initial value of the range input to suit your specific needs.

Remember to customize the styling of the range input, if desired, by applying additional classes or using custom CSS. Additionally, include the necessary Bootstrap CSS and JavaScript files to ensure proper styling and functionality of the range input.

Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Range in Bootstrap</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="css/base.css" />
  </head>
  <body>
    <div class="container my-5">
      <h4 class="text-danger mb-3">Range in Bootstrap</h4>

      <div class="row">
        <div class="col-8">
          <p class="fw-semibold text-primary border-bottom border-primary py-3">HTML Range</p>
          <input type="range" id="range1" />

          <p class="fw-semibold text-primary border-bottom border-primary py-3">Bootstrap Range</p>
          <input type="range" class="form-range" id="range2" />

          <p class="fw-semibold text-primary border-bottom border-primary py-3">Disabled Range</p>
          <input type="range" class="form-range" id="range3" disabled />

          <p class="fw-semibold text-primary border-bottom border-primary py-3">Steps range</p>
          <input type="range" class="form-range" min="0" max="5" step="0.5" id="range4" />
        </div>
      </div>
      <!--Container end -->
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>

Live Preview