I’m making an HTML music player project and I’m trying to make the left part of the <input type="range" value="0"> slider be black.
The slider is to show how much a song has played and to change from where the song is played. The slider has this CSS:
#progress{
-webkit-appearance: none;
width: 100%;
height: 10px;
cursor: pointer;
border-radius: 4px;
margin: 40px 0;
background: white;
border: 4px solid black;
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
}
#progress::-webkit-slider-thumb{
-webkit-appearance: none;
background-color: rgb(245, 245, 245);
width: 20px;
height: 20px;
border-radius: 50%;
border: 3px solid black;
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
}
This is the whole HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>
HTML Music Player
</title>
<script defer src="script.js"></script>
</head>
<body>
<div class="container">
<div class="music-player">
<audio id="song"></audio>
<img id="thumbnail">
<h1 id="title"></h1>
<h4 id="artist"></h4>
<input type="range" value="0" id="progress">
<div class="controls">
<div onclick="previousSong()" onmouseover="prevOver()" onmouseout="prevOut()" id="backward">
<img src="icons/backward.png" width="40%">
</div>
<div onclick="playPause()" onmouseover="playOver()" onmouseout="playOut()" id="play">
<img src="icons/play.png" width="40%" id="ctrlIcon">
</div>
<div onclick="nextSong()" onmouseover="nextOver()" onmouseout="nextOut()" id="forward">
<img src="icons/forward.png" width="40%">
</div>
</div>
</div>
</div>
</body>
</html>
accent-color: black; won’t work for some reason.
I’m using vanilla JavaScript. This code makes so that the left side’s background color changes only on an input, not automatically while the song is playing.
song.ontimeupdate = function() {
progress.value = song.currentTime;
}
progress.oninput = function() {
song.currentTime = progress.value;
}
progress.onchange = function() {
progress.style.background = `linear-gradient(to right, black 0%, black ${(this.value-this.min)/(this.max-this.min)*100}%, #DEE2E6 ${(this.value-this.min)/(this.max-this.min)*100}%, #DEE2E6 100%)`;
}
I need to change the background of the left side automatically.