- [Instructor] So far, vjs has given us a nice
templating language, but it's really not
a dynamic system, so let's go ahead
and add that functionality in this video.
What we're going to do is come up in here
and add ourselves an input field,
and this input field, I'm going to give it
a class of form-control, that's just a
Bootstrap class and a w-25,
which again is another Bootstrap class
that makes it 25% of the width of the container.
In here, we will use the value directive here,
which is the equivalent of a v-bind colon value,
to go ahead and echo the value
of the maximum variable.
As soon as we do that, we have the value
right up here of 99, because that's
the value of that element.
Actually, we should have put this outside the v four,
so we'll go ahead and add it over here
so it just appears one time at the top.
You'll notice that if I change this
to something else like 200, the other item
doesn't show up and that's because when you
use the v-bind directive or this shortcut
right here called value, all we're doing
is echoing the value of the maximum variable.
It essentially goes only one way,
we're just showing it, we're not really setting it.
To do that, there's a separate directive
and it's called v-model, and the difference
is that now in addition to setting this
to the original value, we can go ahead
and modify it, and you can see that our display
is going to change because this is not just showing
you the value, it also allows you
to modify or change the value.
Let's go ahead and set that to 99,
and even like 96, you can see that we only get one.
This is now a dynamic element, and that's
pretty cool but I think that we could do
a little bit better than this, to make it more dynamic.
Let me go ahead and add some code here,
and we'll take a look at how it works.
Let's go ahead and hide the interface
and we'll type some of this code in
so that it doesn't keep on updating as we type.
These are some Bootstrap classes,
this is going to be an inline form,
and I am adding a margin to the right of auto,
and then I'll put my input field in here,
and I'm going to add a label for it.
I'll make it bold and give it a margin to the right
of two units so it'll just give it
a little bit of spacing.
We're going to issue this for attribute here,
this is just a form attribute just so that
we can tie this label to whatever it changes.
I'll give it a label here of max label
and I'll go ahead and add the id here of formMax.
These two should always match,
they really don't have anything to do with vjs,
just a way you build form elements.
In addition to that, I'm going to add
another input here, and this is going to be
the cool one, it's going to have a type of range
and I'm going to give it a class of custom-range.
Again, this is just a Bootstrap class
to make it look really pretty.
We're going to set the minimum value
is going to be zero, so this allows us
to set a minimum and a maximum value
for essentially what's going to be a slider.
You're going to see it in just a minute.
We'll use here v-model as well, and track
that variable called maximum.
These are both going to control the model,
or the variable called maximum,
and what this allows us to do is sort of have a slider.
Notice as I'm sliding this right here,
it's showing and hiding the different elements,
and it's also updating here.
I can modify this in either place.
You can see that one of them controls the other one
because they are bound to that variable
and also a modification in either of these
is going to affect the other one as well.