https://i.sstatic.net/MBona.png
Looking for suggestions on how to customize the colors of ranges in Bootstrap 4 and change the blue thumb color to 'gray'.
Below is the example HTML input code:
<p id="slider" class="range-field">
<input
type: "range",
min:"0" max:"3"
class: "custom-range"
value: "2"
disabled: "true"
/>
</p>
Here is a code snippet featuring various vendor-specific classes for customizing sliders:
.custom-range::-webkit-slider-thumb {
background: gray;
}
.custom-range::-moz-range-thumb {
background: gray;
}
.custom-range::-ms-thumb {
background: gray;
}
As recommended by Astariul and aliawadh980, adjust the thumb shadow on click using the following code:
-webkit-slider-thumb:active {
background-color: red;
}
-webkit-slider-thumb,
.custom-range:focus::-webkit-slider-thumb,
.custom-range:focus::-moz-range-thumb,
.custom-range:focus::-ms-thumb {
box-shadow: red;
}
This helpful tutorial is also applicable to Bootstrap: Customizing Input Type Range in Various Browsers.
If you access bootstrap.css from the most recent version, you can search for "range" and leverage the available code as a guide:
.form-range {
width: 100%;
height: 1.5rem;
padding: 0;
background-color: transparent;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.form-range:focus {
outline: 0;
}
.form-range:focus::-webkit-slider-thumb {
box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
.form-range:focus::-moz-range-thumb {
box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
.form-range::-moz-focus-outer {
border: 0;
}
.form-range::-webkit-slider-thumb {
width: 1rem;
height: 1rem;
margin-top: -0.25rem;
background-color: #0d6efd;
border: 0;
border-radius: 1rem;
-webkit-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-webkit-appearance: none;
appearance: none;
}
@media (prefers-reduced-motion: reduce) {
.form-range::-webkit-slider-thumb {
-webkit-transition: none;
transition: none;
}
}
.form-range::-webkit-slider-thumb:active {
background-color: #b6d4fe;
}
.form-range::-webkit-slider-runnable-track {
width: 100%;
height: 0.5rem;
color: transparent;
cursor: pointer;
background-color: #dee2e6;
border-color: transparent;
border-radius: 1rem;
}
.form-range::-moz-range-thumb {
width: 1rem;
height: 1rem;
background-color: #0d6efd;
border: 0;
border-radius: 1rem;
-moz-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-moz-appearance: none;
appearance: none;
}
@media (prefers-reduced-motion: reduce) {
.form-range::-moz-range-thumb {
-moz-transition: none;
transition: none;
}
}
.form-range::-moz-range-thumb:active {
background-color: #b6d4fe;
}
.form-range::-moz-range-track {
width: 100%;
height: 0.5rem;
color: transparent;
cursor: pointer;
background-color: #dee2e6;
border-color: transparent;
border-radius: 1rem;
}
.form-range:disabled {
pointer-events: none;
}
.form-range:disabled::-webkit-slider-thumb {
background-color: #adb5bd;
}
.form-range:disabled::-moz-range-thumb {
background-color: #adb5bd;
}
When using Sass, it is necessary to modify the value of the
$custom-control-indicator-checked-bgThe default setting for
$custom-control-indicator-checked-bg$component-active-bg: theme-color("primary") !default;
// ...
$custom-checkbox-indicator-indeterminate-bg: $component-active-bg !default;
We are facing a challenge within our team that we are struggling to resolve. Our Grid control has been customized by us. When the icon next to the column name is clicked, a pop-up div (referred to as divFilter) appears, allowing for filtering options to be ...
Hello, this is my very first post on stackoverflow. Please forgive any atypical elements in this post. I have a Django Website with a gallery slider, but I am facing an issue where the images appear way too big. You can view them here: I have dedicated n ...
Seeking assistance, I am currently working on building a portfolio using HTML while following a tutorial. I utilized undraw to insert an image but unfortunately, the image is fixed to the right-hand side: I would like to position the image below my icons, ...
I'm really struggling to grasp the distinction between these two properties. After conducting some research, it appears that justify-content can handle... space-between and space-around, while align-items is capable of... stretch, baseline, initial, a ...
I am attempting to create a CSS-only text link to video slider within our Umbraco CMS. Due to the limitations of TinyMCE WYSIWYG, I am restricted in the amount of code I can use as it will strip out most of it. So far, I have developed a basic CSS slider ...
Apologies for any similarity to other questions on this topic. I have searched extensively, but any assistance would be greatly appreciated. I am utilizing a new animation library from Animista to animate specific elements on a test website. Animating ele ...
Trying to create a comment box within a Modal dialog box that is half of the width. The comments in this box should be read-only and created using div tags. Attempted reducing the width and using col-xs-6, but ending up with columns spanning the entire w ...
I recently developed a Nativescript app using Angular, incorporating customized buttons. However, I have encountered an issue where I am unable to achieve perfectly squared buttons with the desired appearance. Here is my CSS code: Button { font-size: ...
My goal is to allow customers to select a color that will persist across different pages on the website. The code below shows how users can choose a color on the first page: <select id="color" style="width: 5%; height: 10%" size="5"> ...
Can someone help me with a positioning problem I'm having? I have a span element below an image inside an li tag, but for some reason the styles are not being applied. You can check out the example in the link below: https://jsfiddle.net/ymm8xpb8/16/ ...
As a newcomer to the world of coding, I've found that asking questions on platforms like Stack Overflow enables me to connect with fellow developers. I usually code using VS Code and rely on the "live server" extension to quickly test my code. Howeve ...
Trying to put this into words is quite challenging, so I created a simple diagram for better understanding: https://i.stack.imgur.com/TMXDr.png The outer parent uses flex with align-items:stretch to ensure that both col 1 and col 2 have the same height. ...
Recently, I began utilizing source maps for my SASS code in order to debug more efficiently in Chrome. My understanding was that Chrome should request both the stylesheet resource and the .map resource, however, only the stylesheet is visible in the netwo ...
I'm attempting to set up Chrome's DevTools to automatically reload a page when I save changes to a watched SCSS file that compiles and updates the CSS file. Although I have checked the Auto-reload generated CSS option, it is unfortunately not fu ...
I am having an issue with the redbar.png image in my CSS. It is positioned too high (within #container) and overlapping with the horizontal nav bar when it shouldn't be. I'm uncertain how to fix this problem. Any suggestions would be greatly appr ...
I've been trying to add music to my blog page using the Billy audio player. I have successfully done this in the past, but for some reason, the player is not appearing on the finished page (I checked on both FireFox and Google Chrome) and I can't ...
Currently, I am working on a website where I have implemented a dark theme by adding a class to the body element. Everything is functioning perfectly in the development environment, but I am encountering issues in the production build. Here is the root l ...
I need help creating a toggle button. To see the code I'm working on, click here. In my JavaScript code, I am reading the value of a 'checkbox'. If the value is true, I add another div with a close button. When the close button is clicked, ...
I am having trouble printing the nivo slider (default-theme): Despite trying for a few days, I still can't figure out why it's not working. I have attempted solutions like #slider { visibility: visible; width: 950px; height: 35 ...
In my React application, I am facing an issue with a transparent div that serves as a dropzone for draggable elements. This div covers text and also contains children elements that may have their own text content. <Dropzone> <SomeChild> . ...