<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
})
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.