Thumb is barely visible in my custom range input - css

Question

Currently busy on creating a range input. However, the range input should be a different background-color, depending where the thumb is.
So far it is working fine, but the thumb is barely visible. Is there some way I can get the thumb on top of the slider? Tried all sorts of styling; position, z-index, display etc.
Here is a snippet of what I have so far.
My expected behavior would be a white circle as thumb, around 20x20.

Answer 1

Use gradient background on the track
You could style the track in such a way that you achieve the same result, using a gradient as background. For a slider at 20% it would be something like:
background: linear-gradient(to right, blue 20%, purple 20%);
A full working example can be found here: https://jsfiddle.net/jkrielaars/frdyr15L/7/
Add styles to CSS
Unfortunately, we can not access the track style directly from js. A workaround for this problem is to add all the possible values in CSS, and than activate them by changing the class, or an other attribute on the input element. (I use style in my example)
This can easily done using some SASS magic.
For a range input from 0 to 100 it could look like this:
#for $i from 0 through 100 {
input[type=range][style=v#{$i}]::-webkit-slider-runnable-track {
background: linear-gradient(to right, blue round(percentage($i/100)), purple round(percentage($i/100)));
}
}
(Note that you can't just use a numeral value in the style attribute. I've adde a letter to make it a string.)
Update element using javascript
Updating the style attribute can be done with some simple javascript. Using the oninput attribute you can make the style update as you slide around.
<input type="range" style="v20" value="20" oninput="this.setAttribute('style', 's'+this.value);"></input>