- [Narrator] Let's keep on building our project
by adding this slider that allows you to qualify
some of these items based on their price.
This one has a couple of interesting things to it,
so it's a good one to do.
So first, I'm going to come into my components folder
and I'll create a new file.
This is going to be called PriceSlider.view
and it's going to to have a template as well as a script,
and in this case, we are going to have a style sheet here.
So, let's go head and grab some
of those things from our code pen,
and we'll start with the HTML.
So, I'm going to grab this transition
sort of at the very top of the screen.
This nav right now is collapsed,
so you can collapse the nav,
and right after that,
you can just grab everything in the transition here,
and this is going to be my HTML.
So that's going to go in template,
and for the script, I'm going to need to give it a name
of price-slider and I'm going to add some things later on.
Now, the way that this particular slider works
is that this class right here is going to
determine whether or not this element is going to show.
So, I'm going to go back into code pen
and you'll notice that I have a little method
right here under computer property,
it's actually a computer property,
not a method.
We have to slide at state method
that makes the status class d-flex or d-none,
depending on the value
of something else called sliderStatus,
and that's something that we're going to
pass to this component from the parent component as a prop,
so let's go ahead and after the name,
we'll add computed here
and we'll paste this slider state right now,
and then we need to make sure
that we say this is expecting a prop called sliderStatus.
Alright, let's go ahead and save that,
and then, sort of, wire it up in my parent component.
So, just like with all the other things,
we will import it,
and this is going to come in as a component,
and then we can use that up here.
So, price-slider and we specified
that we were going to pass it a sliderStatus,
and so we obviously need to put that one in here,
and we'll set it to true so that it shows
because right now, we're not going to have any way
of toggling that slider until we add the navigation.
So, let's go ahead and save that.
See if it shows up,
and I think it is showing up,
it's just that we put it after all the product,
so I actually need to just move it up,
and there it is.
And, it looks like this is too wide before.
If we take a look at PriceSlider,
you'll see that I have,
I was trying out all these different ways
of showing you how to work with styles,
so let's go ahead and write all the stuff
a little bit more simply.
So text the line center.
I can just use a bootstrap class called text-center here,
and I'll leave this just as a regular style attribute,
and this is going to get a hard code of 60 pixels here.
Alright, so let's take a look at it now.
Let's see did we save this?
Let's refresh it.
It looks like it's not getting to be quite 60 pixels,
and that's, of course, because I need to say width.
Alright, so that looks a lot better.
Alright, so right now this isn't quite working,
and the way that I was doing this before
is by tying this component or this input field right here,
actually both the range and the regular input field,
to a variable called maximum.
The problem is that maximum doesn't exist
inside this component.
It actually exists in the parent component,
and it's not proper to try to update something
that belongs in the parent component
inside this child component.
Although, technically, you could do it
by passing along some events,
it's a little bit freaky because the parent component
can actually also update the value of this variable
and then you sort of have a conflict
between what is happening inside the child,
versus the parent.
So there's a slightly different way of doing this.
The main thing is that we're going to have to manage
an internal variable for keeping track
of this value inside this component,
and then communicate with the parent component
and allow it to modify that maximum variable it wants to.
Alright so, to do that, I'm going to create a new variable.
This is going to be called maxAmount
and I'll set it to 99 here just like it was before.
That's the default.
And then, instead of using v-model
to keep of track of maximum,
since maximum doesn't really exist in here,
I'm going to have it keep track
of that maxAmount that I just created.
So now, this range is going to modify this maxAmount variable.
And so now, all we need to do is sort of communicate
with the parent that we're modifying it.
Well, let's save that,
and to do that, I'm going to have to emit something
from within these different input fields.
So, it's going to be a slightly different emit command here,
so I'm going to say on change,
and I'm right now inside the input type text,
so I'm going to say whenever we change this element,
I'm going to emit.
So, I'm going to update a variable called maximum
that exists in the parent component,
so it's a special command.
And just like whenever I do an emit,
I'm going to pass along the maxAmount,
so the current value of maxAmount.
Now, I'm going to need to do this
also in this range input field,
but because it's not a input type text,
my event is going to be input here.
Alright, so let's save that,
and now we need to go into the parent component
and communicate that.
So, we've got this price-slider
coming into the parent component
and the way that we're going to to bring that
in sync with what's happening in here
is, again with a slightly different notation,
we're going to say we're going to track the value of maximum
and we're going to sync it with what we get from the event,
or the emit event that's coming in from our sub-component.
So our sub-component, whenever it changes,
it's going to trigger an event, push it up to the parent,
and that event is going to sync
with the value of maximum inside this component.
Let's go ahead and save that.
Let's try this out.
So you can see that now it's working just like it did,
but you have to program it in a slightly different way.
One more thing I need to do because this particular element
will eventually need some CSS,
I need to go ahead and bring in the CSS from my code pen,
and I have a spot for it.
Actually, it's at the end of this PriceSlider,
and I just paste it right there,
and it's going to perform these different fade elements
whenever I install the last piece here in the navigation.