Дан код взятый с форума для Видео слайдера "ДО и ПОСЛЕ"
нужно добавить динамичный ползунок, вопрос: "Как реализовать?"
идей нет, буду рад помощи)
https://codepen.io/dudleystorey/pen/EIKzk
<div id="video-compare-container">
<br id="video__hr">
<video loop autoplay muted src="videos/after.mp4">
</video>
<div id="video-clipper">
<video loop autoplay muted src="videos/before.mp4">
</video>
</div>
</div>
<code lang="html">
<code lang="css">
#video-compare-container {
display: inline-block;
line-height: 0;
position: relative;
width: 33.33333%;
height: 180%;
padding-top: 37.5%;
border-top: 1px dotted var(--gray);
border-bottom: 1px dotted var(--gray);
}
#video-compare-container > video {
width: 100%;
position: absolute;
top: 0; height: 100%;
}
#video-clipper {
width: 50%; position: absolute;
top: 0; bottom: 0;
overflow: hidden;
}
#video-clipper video {
width: 200%;
position: absolute;
height: 100%;
}
</code>
<code lang="javascript">
function trackLocation(e) {
var rect = videoContainer.getBoundingClientRect(),
position = ((e.pageX - rect.left) / videoContainer.offsetWidth)*100;
if (position <= 100) {
videoClipper.style.width = position+"%";
clippedVideo.style.width = ((100/position)*100)+"%";
clippedVideo.style.zIndex
= 3;
}
}
var videoContainer = document.getElementById("video-compare-container"),
videoClipper = document.getElementById("video-clipper"),
clippedVideo = videoClipper.getElementsByTagName("video")[0];
videoContainer.addEventListener("mousemove", trackLocation, false);
videoContainer.addEventListener("touchstart",trackLocation,false);
videoContainer.addEventListener("touchmove",trackLocation,false);
</code>