Range Slider Styles

[00:00:00]
>> All right, so now we're gonna dig into some of these sliders that are here. And the sliders are styled a little ways down here in our CSS. So if we go down, take a look. We have a volume-slider here, see that? And this is set to a 58% width.

[00:00:23]
And our volume-slider is here. It's an input type of range, okay? So, this one we could just get rid of that width. See if that does anything. Nope. We could make it 100%. What will that do? So that will make it a little bit longer. And we could set its background-color, To transparent.

[00:01:05]
Hey, look at that. It worked. So let's focus on this play slider here now, the other slider. We've got, let me scroll on down here. This is the one with the input type of range. So as you see here in our HTML, there's our input type of range.

[00:01:23]
The id is seek-slider. So this is input with a type of range. Do you see that brackets? That's an attribute selector. So if you guys are not familiar with that, input, of course, is the HTML element. But the brackets here say look for the attribute of type and the value of range.

[00:01:45]
So this is an exact match, right? It has to be a type of range, nothing else. There's a whole bunch of these attribute selectors. You can do wildcard searches, you can do with starting, kind of names for attributes or the end, the attribute ends in something, there's a whole bunch of things that go on with this.

[00:02:03]
I cover that in the intermediate CSS course where I go into these attribute selectors a little bit more. So here we're gonna set our width to 100% again. Okay, and we don't necessarily want it to float because now we've laid this out differently with grid so you could get rid of that.

[00:02:25]
Depending, you can try getting rid of things like margin. Or maybe you like margin, and actually looks like it was lined up better with the margin, so we'll leave that. Interestingly he said margin zero here first and then he overrode it later, which happens in the development process.

[00:02:46]
Of course, the other thing we can add to that is background-color: transparent. And that'll give us a nice clear background slider. Okay, then we have a whole bunch of stuff here underneath of that. This has to do with coloring things, and we can go through this and we can change all of these colors to our color palette.

[00:03:15]
So instead of to the right RGBA bla bla bla bla bla, we could get rid of this, and we could say var(--cyan), right? See how that works? Changes the color of that. If that's something you wanna do, that is something you can do. So you can start messing around here with some of the colors on these sliders, making those kinds of changes.

[00:03:49]
Anywhere here where it says background color, you could change that. var(--cyan), what does that do for us? Maybe you like that better. Maybe you wanna change your background gradient to what it was, right? Var(--cyan). That looks good. Now it's sort of dark back there and then as you play, it changes color, yeah?

[00:04:24]
You see how that works?
>> So is the before pseudo element, is that selecting before you drag it and then reassigning the color?
>> Yeah, so these styles here, great question. These styles here, where we're talking input type of range before, and we also have input type of range here.

[00:04:44]
Notice it says position: relative, right here for the input type of range before, position of relative. And then before it, we have a position of absolute. And it has all these colors that are going on here. What is happening is this is showing the two colors here on the track.

[00:05:04]
So we've actually drawn the track twice, and what's happening is we have one color as the track plays. And we have the second color that's sort of the default. So we're stacking these things on top of each other as the track plays. This lighter color is filling in here on this track.

[00:05:24]
See that? So, how do we figure that out? Well, just change the color. Let's make it magenta. What happens? See that? Cool, right? One change in a time and test it. [LAUGH] Okay. So there's plenty of other places we could go through here and make some more color changes.

[00:05:53]
Anytime you see the 007db5, you can put in var(--cyan), yes?
>> Do attribute selectors work on custom attributes? If we set a custom attribute in HTML, can we access it through CSS?
>> Yes, so if you have a data hyphen attribute, like for your JavaScript or something, yes, you could use an attribute selector to select that.

[00:06:15]
Absolutely, great question. We're at the fiddly bits part of this, [LAUGH] where there's just a lot of little changes to make. Okay, so here for our input type of range. Relative, none. There's our width. I actually got rid of the width here in my notes, and I set my margin and padding to zero.

[00:06:38]
Isn't that interesting? Height's 19, the background-color is transparent. And then we also have, Some other additional styles I'm gonna add here. The current time, And that is here, the span with the id of current-time. We can set some alignment for that. Text-align: left. We can set the duration.

[00:07:19]
Text-align: right, okay? Do I have an audio player, [INAUDIBLE]. Okay, this output style that we have here, I'm gonna change it to audio-player-, container-output, and I'm going to change this to display of inline-block. I don't want the width. I don't want the font size. I don't want the margin, the float, the clear.

[00:08:01]
I don't want any of that. And that will put a lot of these elements better into line with each other, okay? So I'll take care of a lot of those alignment issues. And I think I've got most of the things now. This play-slider looks a little bit off.

[00:08:23]
So let's see if we can fix that problem. If we go back up to my play-slider, We're gonna put some borders on that, see what's going on. [LAUGH] Okay. Well, here we could add a little bit of padding to this, a couple of other things in order to make this line up.

[00:08:49]
But I think you guys kinda get the idea here at this point, right? We're sort of fiddling around here, continuing to make tweaks, and we're darn close to finishing up our audio player here. Fair enough? Okay, and we do have a final version of that, just to show you that I did in fact work through the whole thing.

[00:09:07]
Down here at the bottom. Let me open up that Codepen. So, if you compare this one here with what we've done so far, you will find all of the styling that's here. And I definitely missed a few things in presenting this to you, but most of it is there, right?

[00:09:32]
One of those last little bits of alignment, and so forth.