Bootstrap 5 Range Disabled

Bootstrap 5 Range Disabled cannot be focused, has a greyed-out appearance, and has no pointer events. To disable the range element, the HTML disabled attribute can be added to the range element.

Bootstrap 5 Range Disabled Classes: There is no predefined class to disable the range of Bootstrap 5, to disable range we can use the HTML disable attribute.

Bootstrap 5 Range Disabled Attribute:

disabled: This attribute is used to disable the Range.

Syntax:

<input type="range" 
       class="form-range" disabled 
       min="*" 
       max="*"/>

Example 1: In this example, we show a disabled element with a min value set to 0 and a max value of 10.

HTML

<!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">
    <link rel="stylesheet" 
          href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"/>
</head>

<body>
    <div class="container">
        <div class="mt-5">
            <h1 class="text-success text-center">
                  GeeksforGeeks
              </h1>
            <h4 class="text-center">
                Bootstrap5 Range Disabled
            </h4>
        </div>

        <h5 class="mt-4">
            Default Range Element
        </h5>
        <input type="range" 
               class="form-range" 
               min="0" 
               max="10" />

        <h5 class="mt-4">
            Disabled Range Element
        </h5>
        <input type="range" 
               class="form-range" 
               min="0" 
               max="10"
               disabled />
    </div>
</body>

</html>

Output:

Example 2: The below example shows how to enable/disable the range element via JavaScript.

HTML

<!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">
    <link rel="stylesheet" 
          href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"/>
</head>

<body>
    <div class="container">
        <div class="mt-5">
            <h1 class="text-success text-center">
                GeeksforGeeks
            </h1>
            <h4 class="text-center">
                Bootstrap5 Range Disabled
            </h4>
        </div>

        <input id="range1" 
               type="range" 
               class="form-range" />

        <button class="btn btn-danger mt-4" 
                onclick="toggleRange()">
            Enable/Disable Range Element
        </button>
    </div>

    <script>
        var r = document.getElementById('range1');
        function toggleRange() {
            r.toggleAttribute('disabled');
        }
    </script>
</body>

</html>

Output:

Reference: https://getbootstrap.com/docs/5.2/forms/range/#disabled

Bootstrap 5 Range Disabled

Explore