<div id="main">
  <div id="cursor" />
</div>
#main {
  width: 300px;
  height: 10px;
  border: 2px solid gray;
  position: relative;
}

#cursor {
  position: absolute;
  width: 10px;
  height: 10px;
  background: green;
  pointer-events: none;
}


const elem = document.getElementById("main")
const cursor = document.getElementById("cursor")

let isMouseDown = false

elem.addEventListener("mousedown", e => {
  isMouseDown = true
})

elem.addEventListener("mousemove", e => {
  if (isMouseDown) {
    cursor.style.width = e.offsetX + "px"
  }
})

elem.addEventListener("mouseup", e => {
  isMouseDown = false
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.