console
var cir=document.querySelector(".cir");
var msg=document.querySelector(".msg");
var flag=false;
cir.addEventListener("mousedown",function(e) {
flag=true;
x=e.pageX;
y=e.pageY;
msg.style.display="block";
msg.style.left=x-25+"px";
msg.style.top="73px";
msg.innerHTML=Math.round((x-152)/3);
console.log(flag);
console.log(cir.style.left)
})
window.addEventListener("mousemove",function(e) {
if (flag) {
x=e.pageX;
y=e.pageY;
console.log(cir.style.left)
if (x>162 && x<452) {
cir.style.left=x-11+"px";
msg.style.left=x-25+"px";
msg.innerHTML=Math.round((x-152)/3);
}
}
})
window.addEventListener("mouseup",function() {
flag=false;
msg.style.display="none";
console.log(flag);
})
<div class="box">
</div>
<div class="cir"></div>
<div class="msg"></div>
body {
height: 200px;
display: flex;
justify-content: center;
align-items: center;
}
.box {
position: relative;
width: 300px;
height: 20px;
background-color: lightgray;
border-radius: 10px;
box-shadow: 2px 2px 3px 2px rgba(105, 105, 105, 0.307);
border: 1px solid orangered;
}
.cir {
position: absolute;
top: 97px;
left: 152px;
width: 22px;
height: 22px;
background-color: rgb(255, 77, 32);
border-radius: 11px;
}
.msg {
width: 50px;
height: 20px;
background-color: lightblue;
position: absolute;
display: none;
transition:display .5s;
color: white;
text-align: center;
line-height: 20px;
}
.msg::after {
content: "";
width: 0px;
height: 0px;
display: inline-block;
position: absolute;
left: 20px;
top:20px;
border:5px solid transparent;
border-top: 5px solid lightblue;
}