Bootstrap 5 Range Disabled

Last Updated : 29 Nov, 2022

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:

Bootstrap 5 Range Disabled

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>