css custom music player range

const img = document.querySelector("#img");
const playPause = document.querySelector("#playpause");
const playPauseBtn = document.querySelector("#playpause-btn");
const audio = document.querySelector("#audio");
const title = document.querySelector("#title");
const prevBtn = document.querySelector("#prevbtn");
const nextBtn = document.querySelector("#nextbtn");
const progress = document.querySelector("#progress");
const progressIndicator = document.querySelector(".progress-indicator");
const repeatBtn = document.querySelector("#repeat");

const songs = [{
    path: 'https://raw.githubusercontent.com/ustabasiibrahim/music-player/master/assets/music/1.mp3',
    displayName: 'Yıldız Tozu',
    artist: 'Ozbi',
    cover: "https://images.genius.com/ee202c6f724ffd4cf61bd01a205eeb47.1000x1000x1.jpg",
  },
  {
    path: 'https://raw.githubusercontent.com/ustabasiibrahim/music-player/master/assets/music/2.mp3',
    displayName: 'You're Somebody Else',
    artist: 'flora cash',
    cover: "https://pbs.twimg.com/media/D2NZH-2U4AAL9Xs.jpg",
  },

];

let songIndex = 2;
let isPlaying = false;

function playSong() {
  isPlaying = true;
  playPauseBtn.classList.replace("fa-play", "fa-pause");
  audio.play();
}

function pauseSong() {
  isPlaying = false;
  playPauseBtn.classList.replace("fa-pause", "fa-play");
  audio.pause();
}

function loadSong(song) {
  img.src = song.cover;
  title.textContent = song.displayName;
  audio.src = song.path;
}

function prevSong() {
  songIndex--;
  if (songIndex < 0) {
    songIndex = songs.length - 1;
  }
  loadSong(songs[songIndex]);
  playSong();
}

function nextSong() {
  songIndex++;
  if (songIndex > songs.length - 1) {
    songIndex = 0;
  }
  loadSong(songs[songIndex]);
  playSong();
}

function updateProgress(e) {
  if (isPlaying) {
    const {
      duration,
      currentTime
    } = e.target;
    const progressPercent = (currentTime / duration) * 100;
    progress.value = progressPercent;
    const indicatorAngle = (progressPercent / 100) * 360;
    const indicatorX = Math.cos((indicatorAngle - 90) * (Math.PI / 180)) * 160 + 160;
    const indicatorY = Math.sin((indicatorAngle - 90) * (Math.PI / 180)) * 160 + 160;
    progressIndicator.style.transform = `translate(${indicatorX}px, ${indicatorY}px)`;
  }
}

function progressSlide(e) {
  const {
    value
  } = e.target;
  const progressTime = Math.ceil((audio.duration / 100) * value);
  audio.currentTime = progressTime;
  if (!isPlaying) {
    const indicatorAngle = (value / 100) * 360;
    const indicatorX = Math.cos((indicatorAngle - 90) * (Math.PI / 180)) * 160 + 160;
    const indicatorY = Math.sin((indicatorAngle - 90) * (Math.PI / 180)) * 160 + 160;
    progressIndicator.style.transform = `translate(${indicatorX}px, ${indicatorY}px)`;
  }
}

function repeat() {
  repeatBtn.classList.toggle('color');
  if (repeatBtn.classList.contains("color")) {
    audio.loop = true;
  } else {
    audio.loop = false;
  }
}

playPause.addEventListener("click", () => (isPlaying ? pauseSong() : playSong()));
prevBtn.addEventListener("click", prevSong);
nextBtn.addEventListener("click", nextSong);
audio.addEventListener("timeupdate", updateProgress);
progress.addEventListener("input", progressSlide);
repeatBtn.addEventListener("click", repeat);

loadSong(songs[songIndex]);

.music-player-unique {
  max-width: 350px;
  margin: auto;
}

.disc-container-unique {
  position: relative;
  width: 300px;
  height: 300px;
  margin: auto;
}

.disc-image-unique {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 5px solid #343a40;
}

.progress-container-unique {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 4px solid black;
  box-shadow: 0 17px 33px rgb(189 190 193 / 1);
  display: flex;
  justify-content: center;
  align-items: center;
}

.progress-unique {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 2px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  cursor: pointer;
}

.progress-indicator {
  position: absolute;
  width: 16px;
  height: 16px;
  background-color: #007bff;
  border-radius: 50%;
  top: -8px;
  left: -8px;
  transform: translateX(0);
}

.song-title-unique {
  font-size: 18px;
  font-weight: bold;
  color: #343a40;
}

.controls-unique {
  display: flex;
  justify-content: center;
  align-items: center;
}

.controls-unique .btn-unique {
  background-color: transparent;
  border: none;
  font-size: 32px;
  color: #343a40;
  margin: 0 10px;
}

.controls-unique .btn-unique:hover {
  color: #007bff;
}

<div class="container text-center mt-5">
  <div class="music-player-unique">
    <div class="disc-container-unique">
      <img id="img" src="/src/images/music-1.jpg" alt="Music Disc" class="disc-image-unique">
      <div class="progress-container-unique">
        <input type="range" id="progress" value="0" class="progress-unique">
        <div class="progress-indicator"></div>
      </div>
    </div>
    <div class="song-title-unique mt-3" id="title">Song Title</div>
    <div class="controls-unique mt-4">
      <button id="repeat" class="btn-unique"><i class="fa-regular fa-repeat"></i></button>
      <button id="prevbtn" class="btn-unique"><i class="fa-regular fa-backward"></i></button>
      <button id="playpause" class="btn-unique"><i id="playpause-btn" class="fa-regular fa-play"></i></button>
      <button id="nextbtn" class="btn-unique"><i class="fa-regular fa-forward"></i></button>
      <button id="list" class="btn-unique"><i class="fa-regular fa-list"></i></button>
    </div>
    <audio id="audio"></audio>
  </div>
</div>