Bootstrap5 Range Min and Max attributes are used for altering the minimum and maximum values of the range. By default, the minimum value of the range is 0 and the maximum value is 100.
There is no specific class used for Range Min and Max. Although, we can set the values for min and max by specifying their values.
Range Min and Max Attribute:
- step: This attribute is used to specify the value to increment or decrement in one go.
- min: This attribute is used to set the minimum value of the range.
- max: This attribute is used to set the maximum value of the range.
Syntax:
<input type="range"
step="*"
min="*"
max="*"
class="form-range" />* can be replaced by any value.
Example 1: This is a basic example illustrating the use of the min and max attributes of 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">
<title>Bootstrap5 Range Min and Max</title>
<link rel="stylesheet" href=
</head>
<body>
<div class="container">
<div class="mt-5">
<h1 class="text-success text-center">
GeeksforGeeks
</h1>
<h4 class="text-center">
Bootstrap5 Range Min and Max
</h4>
</div>
<input id="range1" min="5" max="10" type="range" class="form-range" />
<h4>
Current Value:
<span id="curr"></span>
</h4>
</div>
<script>
var el = document.getElementById('curr');
var r = document.getElementById('range1');
el.innerText = r.valueAsNumber;
r.addEventListener('change', () => {
el.innerText = r.valueAsNumber;
})
</script>
</body>
</html>
|
Output:
Example 2: This example illustrates the use of the min and max attributes of the range element along with the step set to 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">
<title>GeeksforGeeks - Bootstrap 5</title>
<link rel="stylesheet" href=
</head>
<body>
<div class="container">
<div class="mt-5">
<h1 class="text-success text-center">
GeeksforGeeks
</h1>
<h4 class="text-center">
Bootstrap5 Range Min and Max
</h4>
</div>
<input id="myRange" min="0" max="50" step="10" 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:
Reference: https://getbootstrap.com/docs/5.2/forms/range/#min-and-max