Spotify progress bar clone exactly

MustBMaster 0
Viewed 57

input {
  height: 4px;
  appearance: none;
  width: 100%;
  margin: 2px;
  border-radius: 8px;
  transition: 0.2s ease;
  background-color: #5e5e5e;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  /* display: none; */
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: green;
}

input[type="range"]:hover {
  background: green;
}
input[type="range"]::-webkit-slider-thumb:hover {
  background-color: white;
}
<input type="range" />

I've been working on cloning Spotify web page(https://open.spotify.com), but stuck in making the progress bar for the music player. I don't know how to style the lower part for the range input. Can some pros give me advices?. This is my first question on da Stack :)

css
1 Answers

It may look like an <input type="range"> tag, but it's achieved with just div tags.

For example you can have one div which could be styled as the progress background, and another div as a child of the first one which acts as the fill of the progress. And the fill percentage is being transformed with some JavaSciprt to match the actual progress of the audio - you can change it with css attributes - e.g. width or transform. The progress thumb (the little white circle) is just another div element which appears on hover.

The functionallity is achieved with JavaScript mainly but I think it's not in the scope of your question.

Zdravko Pernikov0
Related