console
class Progress {
onseek;
onseeking;
onseeked;
constructor(place) {
this.progressBar = document.createElement('div');
this.progressThumb = document.createElement('div');
this.progressBar.appendChild(this.progressThumb);
this.value = 0;
place.appendChild(this.progressBar);
this.progressBar.style.cssText = `
position: relative;
height: 5px;
width: 100%;
background: linear-gradient(to right, #0099bc,#0099bc) #138bd1 no-repeat;
cursor: pointer;
border-radius: 2px;
background-size: 0% 100%;
`;
this.progressThumb.style.cssText = `
position: absolute;
left: 0;
top: -2.5px;
width: 10px;
height: 10px;
border-radius: 50%;
background: #0099bc;
cursor: pointer;
`;
let self = this;
let thisLeft = self.progressBar.getBoundingClientRect().left;
let width = self.progressBar.offsetWidth;
let max = width - (self.progressThumb.offsetWidth / 2);
let lastValue = 0;
function mousedown(e) {
e.stopPropagation();
thisLeft = this.getBoundingClientRect().left;
width = self.progressBar.offsetWidth;
let left = e.clientX - thisLeft - (self.progressThumb.offsetWidth / 2);
if (left < 0) {
left = 0;
} else if (left > max) {
left = max;
}
let persent = (left / max * 100).toFixed(0);
self.progressThumb.style.left = `${left}px`;
self.progressBar.style.backgroundSize = `${persent}% 100%`;
if (self.onseek && self.onseek instanceof Function) {
self.onseek({
value: persent,
max: 100
});
}
self.value = persent;
document.addEventListener('mousemove', mousemove);
document.addEventListener('mouseup', mouseup);
}
function mousemove(e) {
let left = e.clientX - thisLeft - (self.progressThumb.offsetWidth / 2);
if (left < 0) {
left = 0;
} else if (left > max) {
left = max;
}
let persent = (left / max * 100).toFixed(0);
if(persent == lastValue) return;
self.progressThumb.style.left = `${left}px`;
self.progressBar.style.backgroundSize = `${persent}% 100%`;
if (self.onseeking && self.onseeking instanceof Function) {
self.onseeking({
value: persent,
max: 100
});
}
self.value = persent;
lastValue = persent;
}
function mouseup(e) {
document.removeEventListener('mousemove', mousemove);
let left = e.clientX - thisLeft - (self.progressThumb.offsetWidth / 2);
if (left < 0) {
left = 0;
} else if (left > max) {
left = max;
}
let persent = (left / max * 100).toFixed(0);
if (self.onseeked && self.onseeked instanceof Function) {
self.onseeked({
value: persent,
max: 100
});
}
document.removeEventListener('mouseup', mouseup);
}
this.progressBar.addEventListener("mousedown", mousedown);
}
setValue(p) {
p = p < 0 ? 0 : p;
p = p > 100 ? 100 : p;
let max = this.progressBar.offsetWidth - (this.progressThumb.offsetWidth / 2);
let left = p / 100 * max;
this.progressThumb.style.left = `${left}px`;
this.progressBar.style.backgroundSize = `${p}% 100%`;
this.value = parseInt(p);
}
}
let progress = new Progress(document.querySelector("#cont"));
progress.onseeking = function (e) {
console.log(e.value);
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=">
<meta http-equiv="X-UA-Compatible" content="">
<title></title>
</head>
<body>
<div id="cont"></div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
#cont {
position: absolute;
top: 100px;
left: 20px;
width: 200px;
}