JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div id="slider"></div>
    <div id="container">
        <div id="cima"></div>
        <div id="baixo"></div>
    </div>
</div>

CSS

#container > div {
    border: 1px solid #ccf;
    position: absolute;
    left: 0;
    top: 10px;
    overflow: hidden;
    height: 10px;
}
#cima {
    width: 285px;
    z-index: 1;
    background-color: #ccf;
}
#baixo {
    width: 570px;
    background-color: #fff;
}
#slider {
    position: absolute;
    z-index: 2;
    background-color: #55f;
    top: 6px;
    height: 20px;
    width: 20px;
    border-radius: 10px;
}

JavaScript

var slider = document.getElementById('slider');
var cima = document.getElementById('cima');

// posicionar slider
var sliderWidth = slider.getBoundingClientRect().width;
var cimaWidth = cima.getBoundingClientRect().width;
slider.style.left = cimaWidth - (sliderWidth / 2) + 'px';

// arrastar slider
var ativo = false;
var offset = 0;

function toggleAtivo(e) {
    if (e.target != slider) return;
    ativo = (e.type == 'mousedown');
    var sliderPosition = slider.getBoundingClientRect().left;
    offset = sliderPosition - e.pageX;
}
window.addEventListener('mousedown', toggleAtivo);
window.addEventListener('mouseup', toggleAtivo);
window.addEventListener('mousemove', function (e) {
    if (!ativo) return;
    cima.style.width = e.pageX + 'px';
    slider.style.left = (e.pageX + offset) + 'px';
});