”;
This chapter will discuss about Bootstrap form range. Range is an interactive component. The user can quickly scroll and slide through possible values spread across the required range.
Basic example
-
Use class .form-range to create unique controls for <input type=”range”>. Both track and thumb have the same appearance across all browsers.
-
Bootstrap doesn”t support “filling” their range”s track from left to right of the thumb as a means to visually indicate progress. This is only supported on firefox.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Form - Range</title>
<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.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<label for="basicRange" class="form-label">Range</label>
<input type="range" class="form-range" id="basicRange">
</body>
</html>
Disabled
-
The disabled attribute is used to disable the Range.
-
Disabled range cannot be focused, appears greyed out, and has no pointer events.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Form - Range</title>
<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.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<label for="disabledRange" class="form-label">Range</label>
<input type="range" class="form-range" id="disabledRange" disabled>
</body>
</html>
Min and max
Default range input for min is 0 and max is 100. If you are using min and max attributes, new values can be specified.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Form - Range</title>
<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.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<label for="minmaxrange" class="form-label">Range</label>
<input type="range" class="form-range" min="0" max="9" id="minmaxrange">
</body>
</html>
Steps
Range step determines how much the range input value will increase or decrease in one step. Number of steps is doubled when step=”0.5″ is used.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Form - Range</title>
<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.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<label for="stepRange" class="form-label">Range</label>
<input type="range" class="form-range" min="0" max="7" step="0.5" id="stepRange">
</html>
”;