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 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>

Output:

References: https://getbootstrap.com/docs/5.0/forms/range/

Explore