Looking at the images below, or visiting , you can notice that the slider track is visible behind the slider thumb. Check out the images here: Image 1 and Image 2. The CSS for my slider looks like this:
input[type=range] {
appearance: none;
background: $Primary;
width: 100px;
height: 2px;
}
input[type=range][orient=vertical] {
writing-mode: bt-lr; /* IE */
-webkit-appearance: slider-vertical; /* Chromium */
width: 2px;
height: 100px;
}
input[type=range]::-webkit-slider-thumb {
appearance: none;
background: transparent;
border: 2px solid $Primary;
border-radius: 50%;
transition: 0.1s;
}
input[type=range]::-webkit-slider-thumb:hover {
background: $Primary;
}
// Mozilla being difficult
input[type=range]::-moz-range-thumb {
appearance: none;
background: transparent;
border: 2px solid $Primary;
border-radius: 50%;
transition: 0.1s;
}
input[type=range]::-moz-range-thumb:hover {
background: $Primary;
}
You can find the open-source code here: https://github.com/archiemourad/portfolio/blob/main/styles/globals.scss. I comprehend what's going on here, as I've made the thumb transparent intentionally. However, I'm interested in learning how to achieve this while there are changing images in the background. All I desire is for the slider thumb to sustain its transparency and disregard the slider track beneath it. Any guidance would be greatly appreciated.