JSFiddle - React, Tailwind, and code Playground

HTML

<div class="controlar">
    <div class="bola"></div>
</div>
<div id="valor"></div>

CSS

*{
    margin: 0px;
    padding: 0px;
}
.bola {
    background-color: #ccf;
    width: 10px;
    height: 10px;
    position: absolute;
    left: 0px;
}
.controlar {
    position: relative;
    background-color: #558;
    width: 100px;
    height: 10px;
}

JavaScript

var slider = document.querySelector('.controlar .bola');
var limites = document.querySelector('.controlar').getBoundingClientRect();
var valor = document.getElementById('valor');
// 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;
    var position = e.pageX + offset;
    if (position < limites.left || position > limites.right) return;
    slider.style.left = position + 'px';
    valor.innerHTML = position * limites.width / 100;
});