Input Range - Highlight Selected Part

Question

I have an input range. Every time I slide the dot along the bar, I got a value number showing right below the dot.

I would like the bar will show 2 different colors when the dot moves: Left side of the dot, the bar is in black indicating a selected value and the right side of the dot will be default color.

Please give a hand. Thanks.

const
    range = document.getElementById('range'),
   devicesRange = document.getElementById('devices-range'),
    setValue = ()=>{
        const
            newValue = Number( (range.value - range.min) * 100 / (range.max - range.min) ),
            newPosition = 10 - (newValue * 0.2);
        devicesRange.innerHTML = `<span>${range.value}</span>`;
        devicesRange.style.left = `calc(${newValue}% + (${newPosition}px))`;
    };
document.addEventListener("DOMContentLoaded", setValue);
range.addEventListener('input', setValue);

.range-wrap{
    /* width: 500px; */
    position: relative;
}
#range {
  width: 100%;
}
.devices-range-value{
    position: absolute;
    top: 30px;
}
.devices-range-value span{
    width: 30px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    background: white;
    color: #000;
    font-size: 12px;
    display: block;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="range-wrap">
        <input id="range" type="range" min="1" max="100" value="1" step="1">
        <div class="devices-range-value" id="devices-range"></div>
    </div>