1 00:00:00,180 --> 00:00:00,840 Nicely done. 2 00:00:01,110 --> 00:00:07,800 And up next, I would want to work on our price input, which, like I already mentioned previously, 3 00:00:08,070 --> 00:00:11,870 is going to be input with a type of range. 4 00:00:12,420 --> 00:00:20,100 So let's navigate back to our filters and I'm going to jump to the end of comments. 5 00:00:20,520 --> 00:00:27,310 And here, let's just say price copy and paste and of price online. 6 00:00:27,310 --> 00:00:31,620 Instead of the comments, I'm going to go with another firm control, of course. 7 00:00:32,170 --> 00:00:36,960 And then of this firm Control will set up a heading five off price. 8 00:00:37,500 --> 00:00:42,030 And then right after that, I'm going to set up a paragraph with a class of price. 9 00:00:42,360 --> 00:00:45,680 And in here I would just want to display the price. 10 00:00:46,320 --> 00:00:52,530 So whatever is the current price that we have, and again, by default, it's going to be the max one 11 00:00:52,980 --> 00:00:54,580 and it's going to be coming from the side. 12 00:00:54,870 --> 00:01:01,110 But remember, we're getting the pricing sense, so it only makes sense if we run first the format price 13 00:01:01,890 --> 00:01:05,560 function that formats the price and then pass in the price. 14 00:01:05,910 --> 00:01:11,210 So once we do that, we should see our market price, which of course is going to be our default value. 15 00:01:11,460 --> 00:01:13,730 And then here comes our input. 16 00:01:14,040 --> 00:01:18,750 So we go with input and then type will be range like so. 17 00:01:19,110 --> 00:01:26,130 And then for a name, yes, it needs to be priced correct, since that is the value in a state. 18 00:01:26,460 --> 00:01:30,930 Now I don't care about the idea and then I'll go with my own change. 19 00:01:31,140 --> 00:01:39,090 And then every time we change our value, of course I would want to run my update filters method like 20 00:01:39,090 --> 00:01:46,580 so and then three attributes that we would want to pass in min max and the actual value. 21 00:01:46,830 --> 00:01:53,250 So men will be of course equal to my main value coming from the state then Max. 22 00:01:53,550 --> 00:02:02,650 Same thing to Max attribute is equal to my max price and then the actual value will be equal to my price. 23 00:02:02,790 --> 00:02:06,750 So in here, let's write value is equal to the price. 24 00:02:07,230 --> 00:02:15,120 Now again, I want Gotcher in a filter context is the fact that even though you would think and by the 25 00:02:15,120 --> 00:02:19,190 way, in here it says men is not defined. 26 00:02:19,200 --> 00:02:23,400 Of course it is, because it should be men, price and gotchas. 27 00:02:23,400 --> 00:02:29,220 Following that, you would think that when you're getting the value from this input. 28 00:02:30,060 --> 00:02:36,840 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 29 00:02:36,840 --> 00:02:38,700 actually filtering the product. 30 00:02:38,970 --> 00:02:40,820 So first I'll show you how that works. 31 00:02:41,190 --> 00:02:43,580 Again, navigating to the big screen. 32 00:02:43,590 --> 00:02:44,880 We have our components. 33 00:02:44,880 --> 00:02:49,020 We have our producer on online and set of filters. 34 00:02:49,320 --> 00:02:54,390 We should have the value and notice how it is a number of value. 35 00:02:54,870 --> 00:03:00,290 So this is a number, whether that is a price or match price or the price. 36 00:03:00,690 --> 00:03:08,090 But when we're changing this value in our state, so when we're changing our input, the arrangement. 37 00:03:08,100 --> 00:03:13,620 But you'll notice how this turns into a string and that's not what we're looking for. 38 00:03:13,890 --> 00:03:18,360 So that's why in the filter context, again, we'll do one more. 39 00:03:18,360 --> 00:03:21,930 If so, in the filter context, right after the color. 40 00:03:21,970 --> 00:03:29,460 Again, I'm just going to say, if name is equal to the price, then I would just want to format that 41 00:03:29,460 --> 00:03:29,850 value. 42 00:03:30,030 --> 00:03:35,280 And I'll say value is equal to a number and I'll pass in again. 43 00:03:35,590 --> 00:03:38,960 This is just coming from the JavaScript and I pass in my value. 44 00:03:39,180 --> 00:03:45,720 So that way I'll always have it as a number because it's going to be much more useful later when I'm 45 00:03:45,720 --> 00:03:47,300 filtering my product. 46 00:03:47,610 --> 00:03:50,040 So again, I have my components on refresh. 47 00:03:51,250 --> 00:03:59,350 I'll make sure that I have my filter one and then set of to disallow the filters and every time I change 48 00:03:59,350 --> 00:03:59,500 this. 49 00:03:59,770 --> 00:04:05,920 Notice how everyone stays as a no, not exactly what I want. 50 00:04:05,930 --> 00:04:10,090 And again, input range is not a reacting. 51 00:04:10,100 --> 00:04:14,620 It's a HDMI element where we have three properties. 52 00:04:14,620 --> 00:04:20,200 As far as setting up those values, we have Min max as well as the actual value. 53 00:04:20,290 --> 00:04:26,980 And of course, of course, we pass in the state power and essentially by doing so, we set this up 54 00:04:27,100 --> 00:04:29,370 as a controlled input. 55 00:04:29,680 --> 00:04:30,790 So I have my own change. 56 00:04:30,790 --> 00:04:36,710 I have my value, which is equal to the price, and I have these two extra ones where I have Min and 57 00:04:36,820 --> 00:04:37,170 Max. 58 00:04:37,420 --> 00:04:38,950 So that should do it for a price. 59 00:04:39,220 --> 00:04:45,070 And I think we can set up our last one, I guess because I'm not counting the Klinefelter's, even though 60 00:04:45,070 --> 00:04:47,230 technically it is a functionality. 61 00:04:47,230 --> 00:04:51,460 But the last one, as far as the actual filters will be free shipping checkbox.