Bootstrap 5 Range SASS
Bootstrap 5 Range SASS has a set of variables with default values that can be changed to customize the container. We can customize the range component by changing the default value of the variables.
Bootstrap 5 Range SASS variables :
- $form-range-track-width: It is the width of the range tracking.
- $form-range-track-height: It is the height of the range tracking.
- $form-range-track-cursor: It is the cursor type of range tracking.
- $form-range-track-bg: It is the background color of the range tracking.
- $form-range-track-border-radius: It is the border radius of the range tracking.
- $form-range-track-box-shadow: It is the shadow of the range tracking.
- $form-range-thumb-width: It sets the width of the slider.
- $form-range-thumb-height: It sets the height of the slider.
- $form-range-thumb-bg: It gives background color to the range thumb.
- $form-range-thumb-border: It gives a border to the range thumb
- $form-range-thumb-border-radius: It is the border radius of the range thumb.
- $form-range-thumb-box-shadow: It sets the shadow of the range thumb.
- $form-range-thumb-focus-box-shadow: It sets the shadow of the range thumb when it is in focus.
- $form-range-thumb-focus-box-shadow-width: It sets the width of the range thumb when it is in focus.
- $form-range-thumb-active-bg: It is the background color when the range thumb is active.
- $form-range-thumb-disabled-bg: It is the background color of the disabled thumb.
- $form-range-thumb-transition: It is the transition of form-range thumb.
Steps to override SCSS of Bootstrap:
Step 1: Install bootstrap using the following command
npm i bootstrap
Step 2: Create your custom scss file and write the variable you want to override. Then include the bootstrap scss file using import.
@import "../node_modules/bootstrap/scss/bootstrap.scss"; $variable_to_override: value;
Step 3: Convert the SCSS file to CSS using a live server extension.
Step 4: Include the CSS file in your HTML file.
<link rel="stylesheet" href="./assets/css/style.css">
Project Structure:
Syntax :
$form-range-thumb-border: value; $form-range-thumb-border-radius: value; ** .form-range { &::-webkit-slider-thumb { border: $form-range-thumb-border; @include border-radius($form-range-thumb-border-radius); } }
Note: The ‘**’ in the above syntax means that other variables can be added.
Example 1: In this example, the $form-range-track-width, $form-range-track-height, $form-range-track-bg variables are used.
style.scss
CSS
@import "../node_modules/bootstrap/scss/bootstrap.scss" ; $form-range-track- width : 70% ; $form-range-track- height : 1.5 rem; $form-range-track-bg: rgba( 79 , 76 , 76 , 0.877 ); .form-range { width : 70% ; height : add( $form-range-thumb-height, $form-range-thumb-focus-box-shadow-width * 2 ); padding : 0 ; background-color : transparent ; appearance: none ; &::-webkit-slider-thumb { margin-top : ($form-range-track-height - $form-range-thumb-height) * . 5 ; } &::-webkit-slider-runnable-track { width : $form-range-track-width; height : $form-range-track-height; background-color : $form-range-track-bg; } &::-moz-range-track { width : $form-range-track-width; height : $form-range-track-height; background-color : $form-range-track-bg; } } |
style.css
CSS
.form-range { width : 70% ; height : 1.5 rem; padding : 0 ; background-color : transparent ; appearance: none ; } .form-range::-webkit-slider-thumb { margin-top : 0.25 rem; } .form-range::-webkit-slider-runnable-track { width : 70% ; height : 1.5 rem; background-color : rgba( 79 , 76 , 76 , 0.877 ); } .form-range::-moz-range-track { width : 70% ; height : 1.5 rem; background-color : rgba( 79 , 76 , 76 , 0.877 ); } |
index.html:
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" > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" > </ script > < link rel = "stylesheet" href = "style.css" > </ head > < body > < div class = "text-center" > < h1 class = "text-success" >w3wiki</ h1 > < h2 >Bootstrap5 Range SASS</ h2 >< br >< br > < label for = "gfgRange" class = "form-label" > </ label > < input type = "range" class = "form-range" id = "gfgRange" > </ div > </ body > </ html > |
Output:
Example 2: In this example, the $form-range-thumb-border and $form-range-thumb-border-radius variables are used in the below example to change the border and border radius of the thumb.
style.scss
CSS
@import "../node_modules/bootstrap/scss/bootstrap.scss" ; $form-range-thumb- border : 2px solid black ; $form-range-thumb-border-radius: 0 ; .form-range { width : 70% ; &::-webkit-slider-thumb { border : $form-range-thumb-border; @include border-radius($form-range-thumb-border-radius); } &::-moz-range-thumb { border : $form-range-thumb-border; @include border-radius($form-range-thumb-border-radius); } } |
style.css
CSS
.form-range { width : 70% ; } .form-range::-webkit-slider-thumb { border : 2px solid black ; border-radius: 0 ; } .form-range::-moz-range-thumb { border : 2px solid black ; border-radius: 0 ; } |
index.html:
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" > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" > </ script > < link rel = "stylesheet" href = "style.css" > </ head > < body > < div class = "text-center" > < h1 class = "text-success" >w3wiki</ h1 > < h2 >Bootstrap5 Range SASS</ h2 >< br >< br > < label for = "gfgRange" class = "form-label" ></ label > < input type = "range" class = "form-range" id = "gfgRange" > </ div > </ body > </ html > |
Output:
References: https://getbootstrap.com/docs/5.0/forms/range/#sass
Contact Us