CSS slider thumb with visible track behind it

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.

Answer №1

Check out this recent creation of mine. Stay tuned for an upcoming article that will delve into its workings

input {
  --c: orange; /* active color */
  --g: 8px; /* the gap */
  --l: 5px; /* line thickness*/
  --s: 30px; /* thumb size*/
  
  width: 400px;
  height: var(--s); /* needed for Firefox*/
  -moz-appearance :none;
  appearance :none;
  background: none;
  cursor: pointer;
  overflow: hidden;
  transition: .3s;
}

/* chromium */
input[type="range" i]::-webkit-slider-thumb{
  height: var(--s);
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: 0 0 0 var(--l) inset var(--c);
  border-image: linear-gradient(
    #0000 calc(50% - var(--l)/2),var(--c) 0 calc(50% + var(--l)/2),#0000 0) 
    1/0 100vw/0 calc(100vw + var(--g));
  -webkit-appearance: none;
  appearance: none;
  transition: .3s;
}
/* Firefox */
input[type="range"]::-moz-range-thumb {
  height: var(--s);
  width: var(--s);
  background: none;
  border-radius: 50%;
  box-shadow: 0 0 0 var(--l) inset var(--c);
  border-image: linear-gradient(
    #0000 calc(50% - var(--l)/2),var(--c) 0 calc(50% + var(--l)/2),#0000 0) 
    1/0 100vw/0 calc(100vw + var(--g));
  -moz-appearance: none;
  appearance: none;
  transition: .3s;
}

/**/
body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  gap: 40px;
  place-content: center;
  background: repeating-linear-gradient(-45deg, #fff 0 20px, #f9f9f9 0 40px)
}
<input type="range" min="0" max="100" step="1" value="20">

<input type="range" min="0" max="100" step="1" style="--c: lightblue;--l: 6px;--g:12px;">

<input type="range" min="0" max="100" step="1" value="70" style="--c: red;--l: 4px;">

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Struggling to make the right-side margin function correctly on a fixed navbar using a grid layout

Currently, I have successfully implemented a sticky top navbar. The issue arises when I try to add a 15vw margin to the right side of the logo image, similar to what I have done on the left side. Despite my attempts, it doesn't seem to work and I&apos ...

"The onkeydown event dynamically not triggering for children elements within a parent element that is contentEditable

Can anyone offer some insights into why this code isn't functioning as expected? My goal is to attach the listener to the children elements instead of the body so that I can later disable specific keystrokes, such as the return key. <!DOCTYPE html ...

Tips for dynamically adjusting the size of a div container according to the user's

I have been working on a unique landing page design featuring a menu made up of custom hexagons. I aim to make these hexagons dynamically adjust to fill the entire screen based on the user's resolution, eliminating the need for scrolling. For a previ ...

Position the icon to the left side of the button using Bootstrap

Need help with centering text on a bootstrap 3 button while aligning the font awesome icon to the left side. <button type="button" class="btn btn-default btn-lg btn-block"> <i class="fa fa-home pull-left"></i> Home </button> Usi ...

What techniques can I implement using JavaScript or CSS to create a slightly transparent effect on my text?

I am currently developing a website that features changing background images. I am looking to have the text on the site mimic the color of the backgrounds, but not so much that it becomes difficult to read. How can I make the text transparent in this man ...

What are the advantages of using REM instead of PX?

When is it ideal to choose rem over px units in CSS? Many articles advocate for using REM to accommodate user preferences, particularly when it comes to font size. However, the focus tends to be solely on font size rather than considering other aspects lik ...

Tips for centring navigation horizontally and making it responsive using CSS

Is there an effective way to horizontally center the navigation within a div using responsive CSS? HTML: <nav id="centermenu"> <ul> <li><a href="#">Business</a></li> <li><a href="#">Spec ...

Overflowing content in a table within a div element

Issue: I am encountering a problem with resizing a table inside a div that contains input elements. When I adjust the browser window size or change to a lower resolution, the div element resizes and scales down, causing a horizontal scroll bar to appear. H ...

Mozilla Firefox does not have the capability to support preloading

I am having an issue with preloading CSS sheets. I attempted to preload the CSS sheet using the preload attribute in HTML. It works fine on Google Chrome, but unfortunately, it does not work on Firefox. <head> <link href=assets/css/master.c ...

Node.js (Next.js) is encountering an issue when attempting to import an object from a module. The error message reads: "Module not found: Can't resolve '

In my project using Node.js with React and Next.js, the vital components are stored in the server file. main.js(server file) const app = next({ dev }) //dev = true ... const DR_LINK = "anything" module.exports.app = app; module.exports.DR_LIN ...

What is the reason behind LESS displaying arithmetic operations as text instead of performing them?

Whilst composing the subsequent operations @a: 2px @variable: @a + 5; .margin-style{ margin-left: @variable; } The code above compiles into .margin-style{ margin-left: 2px + 5; } Rather than margin-left:7px; What could be causing this issue? ...

The TreeView control displays as a <div> element, which results in an unexpected line break

I am currently working on designing a layout that includes an ASP.NET TreeView control on the left-hand side. However, I am facing an issue where the TreeView renders as a div, causing a line break. I have tried using display:inline, but it doesn't se ...

The NX Monorepo housing a variety of applications with unique design themes all utilizing a single, comprehensive UI component

We are currently working on a design system for a NX monorepo that has the potential to host multiple apps (built using Next.js), all of which will share a common component library. While each app requires its own unique theme, the UI components in the lib ...

Is there a way to determine the negative horizontal shift of text within an HTML input element when it exceeds the horizontal boundaries?

On my website, I have a standard HTML input field for text input. To track the horizontal position of a specific word continuously, I have implemented a method using an invisible <span> element to display the content of the input field and then utili ...

Tips for achieving the Bootstrap 5 Modal Fade Out effect without using jQuery or any additional plugins apart from Bootstrap

I'm facing some challenges in achieving the fade out effect in Bootstrap 5 modals. I am aiming for something similar to the "Fade In & Scale" effect demonstrated here: https://tympanus.net/Development/ModalWindowEffects/ It is crucial for me to accom ...

updating the HTML DOM elements using JavaScript is not yielding any response

One way that I am trying to change the background of a div is by using a function. Below is an example of the html code I am working with: $scope.Background = 'img/seg5en.png'; document.getElementById("Bstyle").style.background = "url("+$scope.B ...

Eliminate any hyperlink mentions from the Media Print Screen

I'm experiencing a small issue where I am unable to remove the link reference from the print view. Below is the HTML code snippet: <table style="width: 436px; height: 374px;" border="0" cellpadding="5"> <tbody> <tr style=" ...

Attempting to conceal the API, however, the backend is throwing an error

view the error image I am currently in the process of developing an NFT search application that is capable of locating the NFTs associated with a specific wallet address. However, I am faced with the challenge of using Alchemy without exposing the API key ...

Adding a button label value to a FormGroup in Angular

I've been working on a contact form that includes inputs and a dropdown selection. To handle the dropdown, I decided to use the ng-Bootstrap library which involves a button, dropdown menu, and dropdown items. However, I'm facing difficulties inte ...

Achieve centered alignment for a website with floated elements while displaying the complete container background color

I am currently working on a website that consists of the basic elements like Container, Header, Content, and Footer. The container has a background-color that should cover the entire content of the site, including the header, content, and footer. However, ...