Interactive Pricing Component using Flexbox & jQuery

I faced majorly two problems here.

• First was while changing colour of slider's (range's) background according to its value, I couldn't figure out how to achieve it, so I made a div and fixed it on the slider's track and changed it's width using JavaScript, which I don't find efficient solution.

<div class="slide-bar">
    <input type="range" id="slider" min="1" max="5">
    <div class="slider-bg"></div>
</div>

.slide-bar {
    position: relative;
}

#slider {
    width: 100%;
    -webkit-appearance: none;
}
.slider-bg {
    left: 0;
    height: 8px;
    width: 50%;
    position: absolute;
}

let $slider = $('#slider');
let $sliderBg = $('.slider-bg');

$slider.change(function() {
    $sliderBg.width(`${(this.value * 25) - 25}%`);
});

• Second, my JS Script responds too late, like when I change the slider it takes some time to reflect back the changes.

Suggestions & Corrections are most welcomed.