Check out a free preview of the full Build a Fullstack App from Scratch (feat Next.js) course:
The "Seek Bar UI" Lesson is part of the full, Build a Fullstack App from Scratch (feat Next.js) course featured in this preview video. Here's what you'd learn in this lesson:

Scott walks through implementing the sidebar component, discusses using Chakra's List component to display items, and demonstrates using React Icons to import icon packs as components. Importing all of the sidebar's needed Chakra and icon components is also demonstrated in this segment.

Get Unlimited Access Now

Transcript from the "Seek Bar UI" Lesson

[00:00:00]
>> So we'll keep moving, we got the buttons, all that's looking good, now let's render the seek bar, so we have that seek bar there it like I said, it won't work. It won't actually do anything until we get some state going, so underneath the center element that we did, this is where we'll render it.

[00:00:17] We'll make another box here, I think the color for this as far as when I say color I'm talking text for like these numbers, they're not quite right white, they're more like a gray ish. So I'm going to put the color here 600, so gray dots 600 and then inside of here, we're going to use a flex because if you look at the SeekBar, we basically have three items.

[00:00:42] So we have the current runtime, the SeekBar itself and then the overall duration, so that that'll be a flex, will this flex over those, so I'm gonna add a flex. And then I just wanna make sure that everything is centered like it should be, so I'm gonna add justify center here and align center which will vertically center it as well, so we got those.

[00:01:10] The next section is going to be the runtime that number for the runtime so we want to be able to position that independently so we'll wrap it in a box even though it's just gonna be text. And then within that box, like I said it's just gonna be text, but I always wrap it in a box so we can position it.

[00:01:29] I wanna add margin to a text element like a paragraph or other added to the div that contains the paragraph. Or imagine adding padding to, it would totally affect the way that text looked, so you want to add it to its container. So we'll do that and then now we kind of got to think about the different widths of these columns in the flex container.

[00:01:53] So if we go back and look, the SeekBar literally takes up like at least 80% of this whole row, so I'm just going to make these two numbers like 10% each and then the SeekBar will take up 80. So we'll get this box and with a 10% like so and then for the text, we just hard coded number right quick, so I'll just put like, we're currently at one minute and 21 seconds, something like that.

[00:02:21] Font size, I think this one's probably gonna look good extra small, so we'll do that. So if we go back and look, here we go, I got our 121, it's gonna be centered because nothing else is coming after it and I put justify center so it's gonna stay at the center.

[00:02:43] As soon as we add in the range next that's gonna 80% you'll see this thing slide over to the left. So let's do that, so the next column is going to be the range so we'll also add a box to add some container to that and this is gonna have a width of 80%.

[00:03:05] And then we'll use the range slider component that we imported, if you did not import already, it's chakra UI, so here's the range slider, and this thing takes a lot of props. It also takes a child so we'll put some stuff in between it, as far as the props go, it's a little weird how it works, so the first thing is it takes an ARIA label, wow, what was that?

[00:03:29] Alright, label, there we go and According to the documentation really wants you to set because I think this range slider has the ability to have like multiple thumbs on it. So it can be it can range on either side like it can go up and down the left and up and down on the right, we only we don't want to do that.

[00:03:47] So we but we still have to set a min max even though we're only going from left to right So we'll save min max here on ARIA. You might get an error saying like that's not supported and ARIA label, it probably isn't but range slider is not a built in element in HTML.

[00:04:04] So that error is just not appropriate range sliders, obviously doing something with this ARIA label that it needs. And then for another one's called step so how many values do you wanna increase by every time you do a tick basically, so we wanna increase by 0.1. And then it's gonna ask for the min, so in this case, the minutes just got to be zero because you want to, that's where we start off at zero and then we want the max.

[00:04:37] The max, once we get the songs and the durations, we'll do some math and we'll figure out what the duration is, we'll put that in there but for now, just put a number. You can put whatever number you want, I'll probably just make it match the We're gonna have a, no I had a runtime winner, yeah, just put whatever you want because we're gonna make that better.

[00:04:55] We're gonna make that real and then everything else is just a bunch of like on changes and handlers and values, things that we haven't set up yet what state I'm also just gonna put it her. Just in case we need to get a reference to it, I'm just gonna say, player range, so we get a nice reference to it.

[00:05:14] Like I said, you'll get this error here for the ARIA label with yes lint saying like, it must be a string, but this is fine, this is what it wants, it wants it all right, so ignore that. And then like I said, this component does take children, so for children, we're going to do a range slider track, so this will be the actual just be this the track that the range actually goes across.

[00:05:46] You see it's starting to populate, so we got that, we're going to get this one a different background that's slightly different color. So this will have a background of grade 800 like that and then a child of this is gonna be the range slider field track. And this is just a self closing and it's going to have a different background of slightly lighter so gray.600.

[00:06:22] So this would be the the darker one in the background and this would be the 1onethat's actually moving when the song plays. So it's slightly lighter for is, the track that it runs on is darker, so if you go back you can kind of see it. You can see it's filled out the way it's filled out on mine because of the fake values that I put in, if you put a different values you might see something different.

[00:06:47] Like I said the track is the darker one and then the one the child of that is the lighter one here. Okay, now we got to add the thumb which honestly is like, invisible but I think we have to add it anyway, otherwise we can't do like the clicking and dragging.

[00:07:07] So Spotify is designed, it really isn't like a thumb that you can grab but I was not able to get this work, I was not able to get this to work without adding this. So even though we won't see it, it still has to be there, so we'll do a range slider thumb like this, it's self closing and we just need to say index zero.

[00:07:26] And the reason Apple index zero is because like I said, this component supports multiple thumbs, you can have like, a bunch of thumbs on this range slider. So it's saying where on the range do you want this stuff to exist, there's only one so we're gonna put zero we wanted to be the first one.

[00:07:40] But you can add like I can make more if I want and put put them somewhere else but we're not going to do that okay, so you can see the thumbnails there. The moves, that's good to go, we're almost done with the UI part, we've got to add the duration on the end and then I'll push this up because the duration is actually quite simple.

[00:08:06] So the duration is just going to be the box, right after this box before the flex closes, it's the last column, so we'll add another box here. It will be a width of 10% just like the runtime before it and just like the runtime is just gonna be a text with the font of extra small and it's gonna say what the current duration.

[00:08:34] So I'm just gonna put a number here because obviously we've got to fill that out with a real value soon and we do want to add one more thing here. We will do a text align, right because we don't do that it'll be we want to push over to the right, so we want to be to the right side of its container.

[00:08:52] Whereas by default, everything starts at the left side it just won't look appropriate, so there we go, font size, sorry, likewise it looks a bit cool.