I am trying to build a static range slider

This is range slider which i am trying to create as shown in the screenshot. I hope the image is uploaded. I have attached the HTML, CSS and JS which I have got from codepen. I am trying to make something very much as seen in the image. Please help me. I am struggling with this from 3 days.

<div class="slidercontainer">
                    <input type="range" min="1" max="8" id="myrange" value="4" class="slider">
                    <p class="vtext">Value: <span id="value"></span></p>
                </div>

.slidercontainer {
    margin-top: 50px;
}

.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 12px;
    /* background: linear-gradient(90deg, red 40%, blue 0%); */
    outline: none;
    border-radius: 12px;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 45px;
    height: 45px;
    background: #fff;
    box-shadow: 0px 5px 15px #376FE670;
    border-radius: 100%;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 45px;
    height: 45px;
    background: #fff;
    box-shadow: 0px 5px 15px #376FE670;
    border-radius: 100%;
    cursor: pointer;
}

.vtext {
    margin-top: 50px;
}

var slider = document.getElementById("myrange");
var output = document.getElementById("value");

output.innerHTML = slider.value;

slider.oninput = function () {
    output.innerHTML = this.value;
}

var start_value = slider.getAttribute("value");

var x = start_value;
var color = 'linear-gradient(90deg, rgb(117, 252, 117)' + x + '% , rgb(214, 214, 214)' + x + '%)';
slider.style.background = color;

slider.addEventListener("mousemove", function () {
    x = slider.value;
    color = 'linear-gradient(90deg, rgb(117, 252, 117)' + x + '% , rgb(214, 214, 214)' + x + '%)';
    slider.style.background = color;
});