Interactive pricing slider w/ custom filled in area + thumb

Hey everyone!

For this project I became far more familiar with the range input! With vanilla javascript I could not add eventlisteners to the thumb. I attempted to take away all aesthetics of the original thumb and place a custom div over it to act as the thumb however this took away the functionality of the original slider thumb.

The issue became that the thumb had to be placed in front of the div to maintain functionality. I attempted to hard code the functionality of the slider into the div however this proved too complicated for such a small feature (adding mouseover and mousedown event listeners to the thumb for small aesthetic changes). Has anybody been able to find a reasonable way to add the desired behaviours to the thumb without interfering with the slider?