Bootstrap 5 Range
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 = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel = "stylesheet" > </ head > < body > < div class = "text-center" > < h1 class = "text-success" > w3wiki </ 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 = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel = "stylesheet" > </ head > < body > < div class = "text-center" > < h1 class = "text-success" > w3wiki </ 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/
Contact Us