Currently, I am facing a challenge in changing the color of the thumb slider in a Bootstrap 5 range control. Despite my efforts, I have not yet discovered the right combination to achieve this.
If you would like to take a look, here is the link to the Stackblitz: https://stackblitz.com/edit/stackblitz-starters-3vywax?file=src%2Fmain.ts
Although the Bootstrap 5 documentation mentions sass variables for customization, I am struggling to successfully apply my overrides in the code.
Adapted from the response at sol answer. To customize the slider, you can enclose it in a specific class.
To modify the thumb appearance, we utilize ::-webkit-slider-thumb and reference the bootstrap variable --bs-warning.
.custom-slider {
/* Include custom styles & imports in this CSS file! */
input[type='range'] {
-webkit-appearance: none;
}
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none;
background: var(--bs-warning);
height: 20px;
width: 20px;
margin-top: -8px;
}
}
<div class="col-12 text-center custom-slider">
<label for="zoomSlider" class="form-label">Zoom</label>
<input
type="range"
class="form-range"
min="0.75"
max="1.25"
step="0.25"
id="zoomSlider"
name="zoomSlider"
(input)="changeZoom($event)"
[value]="z"
/>
</div>
</div>
To customize the color of the slider thumb, you can change the $primary SCSS variable:
$primary: #00ff00;
@import 'bootstrap/scss/bootstrap';
Check out the updated StackBlitz here!
If you want the slider color to be different from the primary color, refer to the alternative solution in another answer.
Given the content div's position (up middle), what method can I use to stack the divs in this manner? Is it possible to accomplish with only CSS or is jQuery necessary to move the div content out on larger screens? ...
let context = canvas.getContext("2d"); // for canvas size var window_width = window.innerWidth; var window_height = window.innerHeight; canvas.width = window_width; canvas.height = window_height; let hit_counter = 0; // object is created using class clas ...
Looking to create a design similar to the following: A main container with 'n' child elements that may extend beyond the width of the window, causing the page to scroll horizontally instead of wrapping to the next line. This main container ...
I'm a newcomer to Next.js and I'm still trying to wrap my head around how the caching works. Let's take a look at this simplified example: An index page that displays either Test1 or Test2 components, based on whether the current minute is ...
Feeling a bit confused about a straightforward issue. Can someone clarify for me - What is the original background color of HTML elements? Is it white by default or transparent? ...
I've been struggling to create a Right Aligned Navigation Bar with a search bar and a login icon that stay in one row on the page. No matter how I try, it keeps jumping down instead of aligning properly. Here is an image of what I'm trying to ach ...
Can Angular Material 2 be used to create a custom range slider? For example, I want to display organization sizes with specific ranges like: 1-10 employees 11-50 employees 51-200 employees 201-500 employees 501-1,000 employees 1,001-5,000 employees 5,001 ...
Here's an interesting problem I encountered: <ol><li> <span>01</span><h4>SOME TEXT</h4> </li></ol> #faq ol li h4 { padding-bottom: 16px; padding-top: 14px; padding-left: 16px; max ...
As you hover over an element, the position function adjusts its left attribute to the correct value. However, when you move the mouse away, it resets back to 0, causing the element to appear below the first one in the list. This issue is noticeable when y ...
When I have <img> in the child divs, there is some space between them and a blue stripe appears under the image. How do I make them stack perfectly without any gaps? I am new to HTML and CSS and trying to learn for marketing purposes. Any help or ad ...
I recently created an Angular 4 CLI app. After executing the following command: npm install <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="066469697275727467764632283628362b64637267">[email protected]</a> jquery ...
I came across this answer and am tweaking it to work with my authentication system: Angular 6 AuthGuard However, I'm facing an issue where after successful authentication, instead of redirecting to the specified URL, the auth guard leads to a blank p ...
Is there a way to prevent the span styled with font-size: 12px from inheriting the line-height of the span styled with font-size:18px? I need the line-height value to be 1.5 for both 18px and 1.5px font sizes, but I am unable to separate the two spans. ht ...
This is the current code: HTML: <section class="sponsorSection"> <div class="sponsorImageRow"> <div class="sponsorImageColumn"> <img src="img/kvadrat_logo.png" class="sponsorpicture1"/> </div& ...
I recently set up an Angular2 application and added Firebase using npm. I successfully imported it into my app.component.ts without any errors showing up in my text editor. The package.json file also indicates that Firebase is installed correctly. However ...
Having some trouble with setting up a straightforward FAQ dropdown feature. Could someone lend a hand and see what might be going wrong? Appreciate your help! CSS #faqs h3 { cursor:pointer; } #faqs h3.active { color:#d74646; } #faqs div { height:0; o ...
I've been struggling to make a div box expand when clicked and revert to its original size when clicked again. It seems like a simple task, but no matter what I try, I can't seem to get it right. I'm not sure where I'm going wrong, as t ...
Is there a way to create a common footer for all pages with 5 buttons, where the first button is selected by default? The page opened by this first button should have three tabs. I have already created the tabs but am unsure how to add the footer without r ...
Currently, I am in the process of upgrading to bootstrap 4 but have encountered some challenges. One issue I am facing is with my navbar. It currently appears like this: https://i.sstatic.net/5a4Et.png The problem lies in the fact that the right navbar-c ...
Is there a way to dynamically create and add content to Bootstrap 5 popovers using JavaScript or jQuery? In Bootstrap 3, I used the following method: $('#element').popover({ placement : 'left', trigger : 'focus', html: true } ...