Prev Next

BS5 Range

Bootstrap 5 provides styled range inputs that allow users to select a value from a predefined range.

Key Topics

Basic Range Input

Create a basic range input using the .form-range class.

<div class="mb-3">
    <label for="basicRange" class="form-label">Basic Range Input</label>
    <input type="range" class="form-range" id="basicRange">
</div>

Explanation: Use .form-range to style a range input with the default settings.

Range Input with Steps

Specify steps in a range input by adding the step attribute.

<div class="mb-3">
    <label for="stepRange" class="form-label">Range Input with Steps</label>
    <input type="range" class="form-range" id="stepRange" step="10">
</div>

Explanation: The step attribute defines the interval between selectable values in the range input.

Range Input with Labels

Add labels to indicate the minimum, maximum, and current value of the range input.

<div class="mb-3">
    <label for="labeledRange" class="form-label">Range Input with Labels</label>
    <input type="range" class="form-range" id="labeledRange">
    <div class="d-flex justify-content-between">
        <span>0</span>
        <span>50</span>
        <span>100</span>
    </div>
</div>

Explanation: Use additional labels or a <div> with utility classes to show min, max, and intermediate values for the range input.

Complete Range Input Example

Below is a complete example combining basic, stepped, and labeled range inputs.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Range Inputs Demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container my-4">
        <h2 class="text-center">Bootstrap Range Inputs</h2>
        <div class="mb-3">
            <label for="exampleBasicRange" class="form-label">Basic Range</label>
            <input type="range" class="form-range" id="exampleBasicRange">
        </div>
        <div class="mb-3">
            <label for="exampleStepRange" class="form-label">Range with Steps</label>
            <input type="range" class="form-range" id="exampleStepRange" step="5">
        </div>
        <div class="mb-3">
            <label for="exampleLabeledRange" class="form-label">Labeled Range</label>
            <input type="range" class="form-range" id="exampleLabeledRange">
            <div class="d-flex justify-content-between">
                <span>0</span>
                <span>50</span>
                <span>100</span>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Explanation: This example demonstrates various types of range inputs with features like steps and labels to enhance usability.

Key Takeaways

  • Use .form-range to style range inputs.
  • Add the step attribute to define intervals between selectable values.
  • Enhance usability by adding labels for min, max, and intermediate values.
Prev Next