Bootstrap 5 Range Steps

Last Updated : 07 Dec, 2022

Bootstrap5 Range Step is the factor by which the value of the range input will increment or decrement in one step. The default value of the step is 1 and can be altered by setting the step attribute of the range to the desired value.

There is no specific class used for the Range Steps. Although, the steps attribute can be used.

Bootstrap5 Range Steps Attributes:

step: This attribute is used to specify the value to increment or decrement in one go.
min: This attribute specifies the minimum value of the range.
max: This attribute specifies the maximum value of the range.

Syntax:

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

* can be replaced by any value.

Below Examples illustrates the Bootstrap 5 Range Steps:

Example 1: In this example, the step attribute is set to 5 so the value of the range will increment and decrement by 5 in one go.

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"> 
                GeeksforGeeks 
              </h1> 
            <h3> 
                Bootstrap5 Range Steps 
              </h3> 
        </div> 
  
        <input id="myRange"
               step="5" 
               type="range" 
               class="form-range" /> 
  
        <h4> 
            Current Value: 
            <span id="curr"></span> 
        </h4> 
    </div> 
  
    <script> 
        var el = document.getElementById('curr'); 
        var r = document.getElementById('myRange'); 
        el.innerText = r.valueAsNumber; 
        r.addEventListener('change', () => { 
            el.innerText = r.valueAsNumber; 
        }) 
    </script> 
</body> 
  
</html>

Output:

Example 2: This example shows the use of the step attribute along with the min and max attributes of the range input. Here the value of the step is set to 1.5.

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"> 
                  GeeksforGeeks 
              </h1> 
            <h3>Bootstrap5 Range Steps</h3> 
        </div> 
  
        <input id="myRange" 
               min="0" 
               max="30" 
               step="1.5" 
               type="range" 
               class="form-range" /> 
  
        <h4>Current Value:  
            <span id="curr"></span> 
          </h4> 
    </div> 
  
    <script> 
        var el = document.getElementById('curr'); 
        var r = document.getElementById('myRange'); 
        el.innerText = r.valueAsNumber; 
        r.addEventListener('change', () => { 
            el.innerText = r.valueAsNumber; 
        }) 
    </script> 
</body> 
  
</html>