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