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.
<!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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/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.https://www.tutorialspoint.com/bootstrap/examples/range_min_and_max.php
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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/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.https://www.tutorialspoint.com/bootstrap/examples/range_steps.php
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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/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>
Print Page
Leave a Reply