Nicely done.
And up next, I would want to work on our price input, which, like I already mentioned previously,
is going to be input with a type of range.
So let's navigate back to our filters and I'm going to jump to the end of comments.
And here, let's just say price copy and paste and of price online.
Instead of the comments, I'm going to go with another firm control, of course.
And then of this firm Control will set up a heading five off price.
And then right after that, I'm going to set up a paragraph with a class of price.
And in here I would just want to display the price.
So whatever is the current price that we have, and again, by default, it's going to be the max one
and it's going to be coming from the side.
But remember, we're getting the pricing sense, so it only makes sense if we run first the format price
function that formats the price and then pass in the price.
So once we do that, we should see our market price, which of course is going to be our default value.
And then here comes our input.
So we go with input and then type will be range like so.
And then for a name, yes, it needs to be priced correct, since that is the value in a state.
Now I don't care about the idea and then I'll go with my own change.
And then every time we change our value, of course I would want to run my update filters method like
so and then three attributes that we would want to pass in min max and the actual value.
So men will be of course equal to my main value coming from the state then Max.
Same thing to Max attribute is equal to my max price and then the actual value will be equal to my price.
So in here, let's write value is equal to the price.
Now again, I want Gotcher in a filter context is the fact that even though you would think and by the
way, in here it says men is not defined.
Of course it is, because it should be men, price and gotchas.
Following that, you would think that when you're getting the value from this input.
It's going to be a number and in fact, it is going to be a string that can haunt you later when we're
actually filtering the product.
So first I'll show you how that works.
Again, navigating to the big screen.
We have our components.
We have our producer on online and set of filters.
We should have the value and notice how it is a number of value.
So this is a number, whether that is a price or match price or the price.
But when we're changing this value in our state, so when we're changing our input, the arrangement.
But you'll notice how this turns into a string and that's not what we're looking for.
So that's why in the filter context, again, we'll do one more.
If so, in the filter context, right after the color.
Again, I'm just going to say, if name is equal to the price, then I would just want to format that
value.
And I'll say value is equal to a number and I'll pass in again.
This is just coming from the JavaScript and I pass in my value.
So that way I'll always have it as a number because it's going to be much more useful later when I'm
filtering my product.
So again, I have my components on refresh.
I'll make sure that I have my filter one and then set of to disallow the filters and every time I change
this.
Notice how everyone stays as a no, not exactly what I want.
And again, input range is not a reacting.
It's a HDMI element where we have three properties.
As far as setting up those values, we have Min max as well as the actual value.
And of course, of course, we pass in the state power and essentially by doing so, we set this up
as a controlled input.
So I have my own change.
I have my value, which is equal to the price, and I have these two extra ones where I have Min and
Max.
So that should do it for a price.
And I think we can set up our last one, I guess because I'm not counting the Klinefelter's, even though
technically it is a functionality.
But the last one, as far as the actual filters will be free shipping checkbox.