How do i make the slider thumb go over the actual bar in CSS / Javascript?

As you can see in the image the thumb stays below the border of the slider, how do i make it so it stays on top and you can't see the border below the thumb anymore?

and is there a way to reference the slider thumb in the javascript code? so far i have only been able to modify the slider but not the thumb in the script

this is the css slider code:

.slider { -webkit-appearance: none; height: 12px; --pc: 0; --color: #000000; --bgcolor: transparent; --border: #000000; background: linear-gradient(to right, transparent 0 var(--pc), var(--bgcolor) var(--pc) 100%), var(--color); background-origin: content-box; outline: solid; outline-color: var(--border); border-radius: 10px; overflow: visible; } .slider::-webkit-slider-thumb { -webkit-appearance: none; border-radius: 50%; width: 20px; height: 20px; outline: solid; outline-color: #000000; background: #CC1818; }

and this is how i create the slider object in the script: (a new one gets created every time i call the function to go to the next song)

progressbar = document.createElement("input") progressbar.className = "slider" progressbar.value = 0 progressbar.max = audio.duration progressbar.min = 0 progressbar.style.width = "75%" progressbar.style.position = "absolute" progressbar.style.bottom = "16%" progressbar.type = "range" progressbar.style.setProperty('--color', barcolor) progressbar.style.setProperty('--bgcolor', barbgcolor) progressbar.style.setProperty('--border', barbordercolor) progressbar.oninput = function() { audio.currentTime = progressbar.value pc = (progressbar.value - progressbar.min) / (progressbar.max - progressbar.min) * 100; if (pc < 20) {pc++} progressbar.style.setProperty('--pc', pc + '%'); }