Designing a Music Player

Can anyone tell me how to use slider or any other component as a music player slider?
I want to make something like this :point_up_2: :point_up_2:


hi @tobi,
i think you can put 2 row one inside the other. The bigger has a light color, the one inside has a darker color. The bigger has a width fixed, the smaller has the width that change with the time elapsed listening you favourite song! :slight_smile:


I will try

Thanks for reply :slight_smile: :slight_smile:

Can you help me with a screenshot of blocks

Create a row (main) for the player maybe 90% width of the screen. Inside you add a row (tottime) 90% of main. inside tottime you add a row (elapsedtime) which width is proportional to elapsed time.
should works. Differentiate it by colors :+1: and align them LEFT

1 Like

sorry actually unable

What do you mean by tottime

if you select a song to play, raw called “tottime” should be in width proportional to the lenght of the song. The row “elapsedtime” represent the time while playing the song so its width will start from 0 reaching 100% of the “tottime” when the song is finished. Hope to have some time this eve to help you…


Hey @tobi

Just to expand a little on what @sirfrancisdrake has recommended, we have a tutorial the demonstrates how to do this here:

Although you could probably just as easily use the Slider component.

We also have this Playlist tutorial:

And finally, you might get some inspiration from this weekend design challenge:


2019… is it still valid? :slight_smile:

Hi Tanish,
Did you work out how to create the time elapsed bar for your music player? I have been looking everywhere to try and figure this out!

Are you working from a set playlist @carlin100i00 (i.e one where you know all the tracks and their durations?)

Hi Dom

Yep a set playlist.

Thanks @carlin100i00 - so can you create a list with track durations and use that for your progress bar? (Or are there thousands or millions of songs in your playlist that might make this impractical?)

Yep it’s just for 7 songs.

I just am struggling to work out how to block that out.

Are you able to show me an example of what that would look like in the blocks?

Thanks heaps - Really get a lot out of your youtube videos by the way!


It’s basically the opposite of this tutorial:

Only you’re counting down instead of counting up.

Sure take a look and let me know how you get on with it!

No. Not Yet! :thinking:

@carlin100i00 you can do it with the web viewer easily.

This is a quick demo just to prove the concept

Because you said you only have 7 songs, I created a list of 3 audio files just to prove it works. I created 3 html files each to start a different sound file (of course you can use the Post extension of the web viewer) every time you select a file from the list I assign the corresponding html file to the web viewer to display it.

Happy Thunking


(post withdrawn by author, will be automatically deleted in 24 hours unless flagged)

@muneer Thank you so much, I really appreciate it!!! I’ve been stuck with this project for months and your help has really made a big difference.

1 Like