So we made some basic models here with the name and BG color, and we also have some input fields that are set up and we've started to kind of make something here. I'm going to add a couple more properties or models to my data to start working with it and adding a little bit more effects. So I'm going to add another one in here where it says BG color. I'm going to say text color. And then I just come down here, add a value, say text color, and I could set it as a default value of maybe black or I could specify a hexadecimal color. I'm going to specify pound zero zero zero. And then to connect this to the H one, I can just grab this style binding, go to the h1 and paste the style binding and then take the text color and apply the text color. As you can see, we've done there now to the text color. Now, if we refresh this, oh, look at that. It takes the whole section, makes it black, well that's because of this, becomes color.
All right, so now you can see it's specified the color. Now, it doesn't make too much sense, which one's which, but I've got a feeling the second one is the value for the color. You can see that's pretty easy to go in and do. If I want to add another input field, maybe you want to do the size, I could specify input and the type here I'm going to say is range. And then I'm going to say V model, and then the model here, I'm going to do is text and then size. And then I'll specify the text size here. And I'm not going to give it a default value here. Let's put a comma there. I'm just going to leave it blank here. And then we'll do the same thing for our h1. So now here's our text size. So I'm going to specify as the first value and that CSS rule is font size normally, like this. Right? Well, we can't write that inside of, because it doesn't want hyphens inside view. We would need to write it with an upper case. So we'll say font size and then it's going to be the text size that we're specifying and a comma instead of a semi-colon.
So now we'll save this and refresh and you'll see I have a slider now. And if I make this bigger, it doesn't really change anything. Well, first thing we might say is we want to start to debug our code. Well, we have our slider, but it's not really sliding anything. So if we click inspect, we have the console and the console's just echoing out, saying specify the value does not confirm with the request format. It wants it in RGGB format. So this actually wants it in the six values. The specified value, blue, does not confirm to the request format and this value here... And what this is just giving us... Oh, Chrome is just giving us a little bit of a warning that says, "Hey, you should be using a hexadecimal value whenever you use a color field, and not a written value like this." So I'm going to specify a dark red here and I'll refresh that. So now you can see I'm not getting those errors.
Now, if I move the slider here, I'm not actually seeing the value from the slider, so, hmm. How could I debug this? Well, there's going to be this thing called view dev tools and I'm going to wait, hold off just a little bit before we get to that. And some of the quick ways that we might be able to try that is just making a bracket here and pacing the values or value bracket, bracket name, but we're going to change that to text size. And now if we refresh and we change the value, see the text size does, in fact, change, but it's not actually changing the size here. Well, that's because we need to specify pixels to the value. So if we go into the value here, we could specify plus, and then the value pixels and now you'll see, as we scale, of course it has the values up there. So I'm going to remove this and refresh. We'll change the color to white so we can see it a little bit better. And then I'll close the color picker and then I'll scale this. And now you can see, I have the ability to scale type very easily, right? It's pretty cool. Maybe I want to center this inside.
So very easy to kind of go and add a couple different components and add those attributes inside your CSS. So anything that you have written in CSS previously, you can start to apply some of those CSS rules with various inputs and dynamically change the values inside the DOM.