Bootstrap 5 Range SASS

Last Updated : 23 Jul, 2025

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 "https://www.geeksforgeeks.org/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="https://www.geeksforgeeks.org/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.5rem;
$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.5rem;
    padding: 0;
    background-color: transparent;
    appearance: none;
}
.form-range::-webkit-slider-thumb {
    margin-top: 0.25rem;
}
.form-range::-webkit-slider-runnable-track {
    width: 70%;
    height: 1.5rem;
    background-color: rgba(79, 76, 76, 0.877);
}
.form-range::-moz-range-track {
    width: 70%;
    height: 1.5rem;
    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">GeeksforGeeks</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">GeeksforGeeks</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

Comment

Explore