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
@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
.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:
<!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=
</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
@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
.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:
<!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=
</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