Bootstrap 5 Range Disabled Last Updated : 29 Nov, 2022 Summarize Comments Improve Suggest changes Share Like Article Like Report 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/[email protected]/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/[email protected]/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: Bootstrap5 Range Disabled Reference: https://getbootstrap.com/docs/5.2/forms/range/#disabled Comment More infoAdvertise with us Next Article Bootstrap 5 Range B badalmishra28 Follow Improve Article Tags : Technical Scripter Web Technologies Bootstrap Technical Scripter 2022 Bootstrap-5 +1 More Similar Reads Bootstrap 5 Select Disabled Bootstrap 5 Select is a great component that helps us to add options that can be used inside a form as a field. Disabling a select menu just required the disabled attribute to be added to the select tag. Bootstrap 5 Select Disabled Attributes:disabled: This attribute when added to the select tag, th 2 min read Bootstrap 5 Dropdowns Disabled Bootstrap 5 Dropdowns Disabled is used to disable some text items in the dropdown. A disabled drop-down list is unusable and un-clickable. Bootstrap 5 Dropdowns Disabled classes: There is no specific class for the Bootstrap 5 Dropdowns disabled feature, we need to add a combination of Bootstrap5 Dro 2 min read Bootstrap 5 Range Bootstrap 5 Range is the limit slider between values that can vary. Bootstrap provides us with a custom range of inputs that provides consistent cross-browser styling. The value and background for the range slider are both styled to look the same across all other browsers. Disabled: It is grayed out 2 min read Bootstrap 5 Overview Disabled forms In Bootstrap, you can easily disable input in a form and stop it from interacting by using the disabled attribute. This is mainly used in forms where some fields are not available for all users to fill in. Although buttons are visibly disabled with this attribute you need to add the tabindex="-1" to 2 min read Bootstrap 5 Form Controls Disabled Bootstrap5 Form controls Disabled are used to create a disabled input field. To create a disabled input field, we will use the disabled boolean attribute on an input to disable the input field. It will remove any pointer event from the field. Form controls Disabled Class: There are no pre-defined cl 2 min read Bootstrap 5 List group Disabled items Bootstrap 5 provides the List Group disabled items feature in which items are stored in form of a list. List groups are a flexible and powerful component for displaying a series of content. The List Group Disabled items feature is used to indicate the item is currently disabled. List Group Disabled 2 min read Like