Как заставить двигаться Видео плеер?

Question

Angelina335 @Angelina335

Как заставить двигаться Видео плеер?

Здравствуйте, у меня такой вопросик, все еще не получается сделать линюю прогресса для видео вот код

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="style.css">
	<script src="script.js" defer></script>
	<script src="https://kit.fontawesome.com/a4251b3f03.js" crossorigin="anonymous"></script>
</head>
<body>
	<div class="wrapper">
		<center>
			<video src="Billie%20Eilish%20-%20bad%20guy.mp4" id="video"></video>
			<div class="controls">
				<div id="play"><i class="fas fa-play"></i></div>
				<div id="pause" style="display: none"><i class="fas fa-pause"></i></div>
				<div id="trackBox"><input type="range" value="0" min="0" max="100" id="videoTrack" oninput="range()"></div>
				<div id="sound"><i class="fas fa-volume-up"></i></div>
			</div>
		</center>
	</div>
</body>
</html>

.wrapper{
	max-width: 60%;
	padding: 0 20px;
	margin: 50px auto;
}

center{overflow: hidden; height: 451px;}

video{ width: 100%; }

.controls{
	width: 100%;
	height: 30px;
	background: red;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	position: relative;
	top: -40px;/*-4*/
	-webkit-transition: all ease 1s;
	transition: all ease 1s;
}

#play i,#pause i,#sound i{
	line-height: 30px;
	color: white;
	position: relative;
}

#play,#pause,#sound{
	width: 50px;
	height: 30px;
	background: blue;
	cursor: pointer;
	outline: none;
}

#trackBox{
	width: 80%;
}

#videoTrack{
	-webkit-appearance: none;/**/
	width: 100%;
	height: 5px;
	border: 1px solid #d4d4d4;
	background: -webkit-linear-gradient(left, #8870ff 0%, #8870ff 0%, #fff 0%, #fff 100%);
	outline: none;
	position: relative;
	top: 5px;
}

#videoTrack::-webkit-slider-thumb{
	-webkit-appearance: none;
	background: #d4d4d4;
	width: 18px;
	height: 18px;
	border-radius: 100%;
	cursor: pointer;
	-webkit-transition: all ease 100ms;
	transition: all ease 100ms;
}

#videoTrack::-webkit-slider-thumb:hover, #videoTrack::-webkit-slider-thumb:hover:active{ width: 24px; height: 24px; }
#videoTrack::-moz-range-thumb:hover, #videoTrack::-moz-range-thumb:hover:active{ width: 24px; height: 24px; }

#videoTrack::-moz-range-track{
	-mos-appearance: none;/**/
	width: 100%;
	height: 5px;
	border: 1px solid #d4d4d4;
	background: -mos-linear-gradient(left, #8870ff 0%, #8870ff 25%, #fff 25%, #fff 100%);
	outline: none;
	position: relative;
	top: 3px;
}

#videoTrack::-moz-range-thumb{
	-moz-appearance: none;
	background: #d4d4d4;
	width: 18px;
	height: 18px;
	border-radius: 100%;
	cursor: pointer;
}

var video = document.getElementById('video'),
	play = document.getElementById('play'),
	pause = document.getElementById('pause');

play.onclick = function(){
	video.play();
	play.style.display = 'none';
	pause.style.display = 'block';
}

pause.onclick = function(){
	video.pause();
	play.style.display = 'block';
	pause.style.display = 'none';
}


function videoTime(){
	var timeVid1 = (video.currentTime / video.duration) * 100;
	document.querySelector('#videoTrack').style.background = '-webkit-linear-gradient(left, #8870ff 0%, #8870ff '+timeVid1+'%, #fff '+timeVid1+'%, #fff 100%)';
}
video.addEventListener('timeupdate', videoTime);
function scrub(e){
	var scrubTime = (e.offsetX / document.querySelector('#videoTrack').offsetWidth) * video.duration;
	video.currentTime = scrubTime;
}
document.querySelector('#videoTrack').addEventListener('click', scrub);

линяя двигается но вот кружочек нет, как это исправить помогите.