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:

👁 Image

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

style.css

index.html:

Output:

👁 Image

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

style.css

index.html:

Output:

👁 Image

References: https://getbootstrap.com/docs/5.0/forms/range/#sass