How to make the "slider thumb" on a range slider go outside of the track

I have a vertical range slider and I want the "thumb" (the thing you move on the slider) to be wider than the track itself (very similar to how the android sliders look).

I've tried a lot of stuff and this is the closest I managed to be

This is my code so far:

HTML

<div class="sliderContainer">
   <input type="range">
</div>

JS

$(window).on("load resize", function () {
   var sliderWidth = $('[type=range]').width();

   $('.custom-style-element-related-to-range').remove();

   $('<style class="custom-style-element-related-to-range">input[type="range"]::-webkit-slider-thumb { box-shadow: -' + sliderWidth + 'px 0 0 ' + sliderWidth + 'px;}<style/>').appendTo('head');
});

CSS

.sliderContainer {
    position: absolute;
    margin: 0 auto;
    left: -27px;
    top: 127px;
    width: 0px;
    height: 135px;
}

input[type='range'] {
    width: 120px;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    input[type='range'] {
        overflow: hidden;
        -webkit-appearance: none;
        background-color: #D2CECC;
        transform: rotate(270deg);
    }
    input[type='range']::-webkit-slider-runnable-track {
        height: 3px;
        -webkit-appearance: none;
        color: #0098A6;
    }
    input[type='range']::-webkit-slider-thumb {
        width: 10px;
        -webkit-appearance: none;
        height: 10px;
        cursor: pointer;
        background: #434343;
        color: #0098A6;
        border: 10px #0098A6;
        border-radius: 50%;
        margin-top: -3px;
    }
}

input[type="range"]::-moz-range-progress {
    background-color: #0098A6;
}

input[type="range"]::-moz-range-track {
    background-color: #D2CECC;
}

input[type="range"]::-ms-fill-lower {
    background-color: #0098A6;
}

input[type="range"]::-ms-fill-upper {
    background-color: #D2CECC;
}

Any idea on how to progress would be great

EDIT:

This is what I'm trying to achieve:

I've tried some more stuff and managed to make it so the thumb is "outside" but now the track doesnt change color.

CSS

@media screen and (-webkit-min-device-pixel-ratio:0) {
    input[type='range'] {
        -webkit-appearance: none;
        background-color: #D2CECC;
        transform: rotate(270deg);
    }
    input[type='range']::-webkit-slider-runnable-track {
        height: 3px;
        -webkit-appearance: none;
        color: #0098A6;
    }
    input[type='range']::-webkit-slider-thumb {
        width: 10px;
        -webkit-appearance: none;
        height: 10px;
        cursor: pointer;
        background: #0098A6;
        color: transparent;
        border: 10px #0098A6;
        border-radius: 50%;
        margin-top: -3px;
    }
}

from How to make the "slider thumb" on a range slider go outside of the track