In today’s tutorial, we will see how to use input range in bootstrap 5. For this section we will see disabled input range, min and max input range, step input range. first you need to setup bootstrap 5 project. you can use cdn or read below article.
How to install & setup bootstrap 5
Bootstrap 5 Input Range Example
1. Bootstrap 5 simple input range.
<div class="col-md-5">
<label for="customRange1" class="form-label">input range</label>
<input type="range" class="form-range" id="customRange1">
</div>
bootstrap 5 input range
2. Bootstrap 5 input range value in percentage (10,25,50,75,100).
<!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>Bootstrap 5 Input Range</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="d-flex align-items-center justify-content-center vh-100 flex-column">
<div class="col-md-5">
<label for="customRange1" class="form-label">input range 10%</label>
<input type="range" class="form-range" id="customRange1" value="10">
</div>
<div class="col-md-5">
<label for="customRange1" class="form-label">input range 25%</label>
<input type="range" class="form-range" id="customRange1" value="25">
</div>
<div class="col-md-5">
<label for="customRange1" class="form-label">input range 50%</label>
<input type="range" class="form-range" id="customRange1" value="50">
</div>
<div class="col-md-5">
<label for="customRange1" class="form-label">input range 75%</label>
<input type="range" class="form-range" id="customRange1" value="75">
</div>
<div class="col-md-5">
<label for="customRange1" class="form-label">input range 100%</label>
<input type="range" class="form-range" id="customRange1" value="100">
</div>
</div>
</body>
</html>
bootstrap 5 input range percentage
3. Bootstrap 5 disabled input range.
<div class="col-md-5">
<label for="disabledRange" class="form-label">Disabled range</label>
<input type="range" class="form-range" id="disabledRange" disabled>
</div>
4. Bootstrap 5 min and max—0 and 100, respectively. You may specify new values for those using the min and max attributes.
<div class="col-md-5">
<label for="customRange2" class="form-label">min and max input range</label>
<input type="range" class="form-range" min="0" max="5" id="customRange2">
</div>
<div class="col-md-5">
<label for="customRange2" class="form-label">min and max input range</label>
<input type="range" class="form-range" min="0" max="50" id="customRange2">
</div>
<div class="col-md-5">
<label for="customRange2" class="form-label">min and max input range</label>
<input type="range" class="form-range" min="0" max="100" id="customRange2">
</div>
5. Bootstrap 5 input step range.
<div class="col-md-5">
<label for="customRange3" class="form-label">step input range</label>
<input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3">
</div>
