Bootstrap 5 Range

Last Updated : 16 Dec, 2022

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 in appearance and the pointer does not slide as the pointer events are disabled.
Min and Max: It has implicit values 0 – 100 for min and max respectively which can be changed by specifying new values for min and max attributes.
Steps: The range inputs are only integer values, to change this we need to specify a step value which can be either a decimal value or an integer value.

Example 1: Custom Range and Disabled Range are depicted in this example. class”w-50″ added to give width to the range input.

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 href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
          rel="stylesheet"> 
</head> 
  
<body> 
    <div class="text-center"> 
        <h1 class="text-success"> 
            GeeksforGeeks 
        </h1> 
        <h2>Bootstrap5 Range</h2> 
        <br><br> 
        <h6>Custom Range</h6> 
        <input type="range" class="form-range w-50"> 
        <br> 
        <h6>Disabled Range</h6> 
        <input type="range" class="form-range w-50" 
               disabled> 
    </div> 
</body> 
</html>

Output:

Example 2: Min Max range and step range are depicted in this example. Between Min as ‘0’ and Max as ‘5’ we have 5 intermediate stops but by using the step as 0.5 it becomes 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 href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
          rel="stylesheet"> 
</head> 
  
<body> 
    <div class="text-center"> 
        <h1 class="text-success"> 
            GeeksforGeeks 
        </h1> 
        <h2>Bootstrap5 Range</h2> 
        <br><br> 
        <h6>Min Max Range</h6> 
        <input type="range" class="form-range w-50" 
               min="0" max="5"><br> 
        <h6>Steps</h6> 
        <input type="range" class="form-range w-50" 
               min="0" max="5" step="0.5"> 
    </div> 
</body> 
</html>