Paint the value slider after passing with the handle

Hello, I used the w3schools slider in my code, but I need to paint where it goes to look like the following photo:

Mycodeisnow:

HTML:

.slidecontainerinput.slider#myRangetype="range" min="1" max="100" value="50"

CSS:

.slidecontainer 
      width: 100%
      .slider 
        -webkit-appearance: none
        appearance: none
        width: 100%
        height: 5px 
        background: #d3d3d3
        outline: none 
        //opacity: 0.7 
        -webkit-transition: .2s
        transition: opacity .2s
      .slider:hover 
        opacity: 1
      .slider::-webkit-slider-thumb 
        -webkit-appearance: none 
        appearance: none
        width: 35px 
        height: 35px
        border-radius: 100% 
        background: linear-gradient(to bottom right, white, #654ea3)
        cursor: pointer

and the preview:

Any help is welcome!