dima85,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css"> #block{
height: 550px;
width: 80px;
background-color: #228B22;
}
</style>
</head>
<body>
<div id="value">0</div>
<div id="block"></div>
<script>
addEventListener("load", function() {
class Range {
constructor(band, out, num = 0, step = 100, min = 10, max = 100) {
this.band = band;
this.out = out;
this.num = num;
this.delta = 0;
this.step = step;
this.y = 0;
this.active = false;
this.min = min;
this.max = max;
this.setNum(num);
this.eventHandler = this.eventHandler.bind(this);
this.band.addEventListener("touchstart", this.eventHandler);
this.band.addEventListener("touchmove", this.eventHandler);
this.band.addEventListener("touchend", this.eventHandler);
}
eventHandler(event) {
event.preventDefault();
if (event.type === "touchstart") {
this.y = event.touches[0].clientY;
this.active = true;
}
if (!this.active) return;
if (event.type === "touchmove") {
this.delta = (event.touches[0].clientY - this.y) / this.step | 0;
this.setNum(this.num + this.delta)
}
if (event.type === "touchend") {
this.num += this.delta;
this.num = this.limitNum(this.num);
this.active = false
}
}
setNum(num) {
this.out.innerHTML = this.limitNum(num)
}
limitNum(num) {
return Math.max(this.min, Math.min(num, this.max))
}
}
new Range(document.querySelector("#block"), document.querySelector("#value"), 80);
})
</script>
</body>
</html>