I am looking for a way to remove the thumb from the progress bar in my music player. I have tried various methods without success, and I simply want the progress bar to move forward with color change as it advances based on the Progress variable.
For reference, here are images of the current look and the desired look: https://i.sstatic.net/GWlYW.png
Below is the code snippet:
const MusicPlayer = ({ track }: Props) => {
const [isPlaying, setIsPlaying] = useState(false);
const [audio, setAudio] = useState(new Audio(track.preview));
const [currentTime, setCurrentTime] = useState(0);
const [progress, setProgress] = useState(0);
useEffect(() => {
// Event listeners and logic
});
useEffect(() => {
// Set audio source
});
const togglePlay = () => {
// Play or pause audio
};
return (
<div className="music-player-container" onClick={togglePlay}>
{/* Player UI */}
</div>
);
};
export default MusicPlayer;
.bar-progress {
/* Styling for progress bar */
}
.bar-progress::-webkit-slider-thumb{
display: none;
}