Сделать из div блока похожее на input range

let main = document.querySelector('#main');
let mouseIsPressed = false;

main.onmousedown = function(e) {
    mouseIsPressed = true;
    moveAt(e);
}    

function moveAt(event) {
    if (main.offsetWidth >= event.offsetX) {
        document.querySelector('#main > div').style.width = event.offsetX + 'px'; 
    }
}

document.onmousemove = function(event) {
    if (mouseIsPressed)
        moveAt(event);
}

document.onmouseup = function() {
    main.onmousemove = null;
    main.onmouseup = null;
    mouseIsPressed = false;
}

body{
  height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
#main{
  height: 8px;
  background: #000;
  cursor: pointer;
  width: 100%;
  background: #ededed;
  margin-right: 10px;
  cursor: pointer;
  border-radius: 10px;
} 
#main > div {
  width: 15%;
  height: 8px;
  background: red;
  position: relative;
}
#main > div::before {content: '';
    width: 12px;
    height: 12px;
    border-radius: 100%;
    background-color: #fff;
    box-shadow: 0 0 5px 0 rgb(0 0 0 / 20%);
    position: absolute;
    right: -7px;
    top: -2px;
    cursor: pointer;
}

input {
  width: 100%;
}

<div style="width:600px;"> 
  <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
  <input type="range" min="0" max="100" value="10">
  <br>
  <br>
  <br>
    <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
  <div id="main"> <div></div> </div>
</div>