From a61a65aab08742fea9a7d5a648426764f813321d Mon Sep 17 00:00:00 2001
From: ChrQR <christian@rannes.com>
Date: Tue, 28 May 2024 12:37:58 +0200
Subject: [PATCH] fixed inputs to bind to value rather than state. fixed min
 and max for inputs

---
 src/app/_components/FilterMenu.tsx            | 10 +++++++---
 .../ui/{slider.tsx => slider-two-thumbs.tsx}  | 19 ++++++++++---------
 2 files changed, 17 insertions(+), 12 deletions(-)
 rename src/components/ui/{slider.tsx => slider-two-thumbs.tsx} (58%)

diff --git a/src/app/_components/FilterMenu.tsx b/src/app/_components/FilterMenu.tsx
index dc8e65a..a66a31f 100644
--- a/src/app/_components/FilterMenu.tsx
+++ b/src/app/_components/FilterMenu.tsx
@@ -8,7 +8,7 @@ import {
 } from "~/components/ui/navigation-menu";
 
 import { Input } from "~/components/ui/input";
-import { Slider } from "~/components/ui/slider";
+import { SliderTwoThumbs } from "~/components/ui/slider-two-thumbs";
 import { ChangeEvent, useState } from "react";
 import useFilterStore from "../store";
 
@@ -36,7 +36,7 @@ export default function Filtermenu() {
     setSliderValues(values);
     setMinPrice(values[0]);
     setMaxPrice(values[1]);
-    setStorePrice(minPrice, maxPrice);
+    setStorePrice(values[0], values[1]);
   };
 
   return (
@@ -55,8 +55,10 @@ export default function Filtermenu() {
                 className="min-w-20"
                 type="number"
                 defaultValue={0}
+                min={0}
+                max={maxPrice - 1}
               />
-              <Slider
+              <SliderTwoThumbs
                 value={sliderValues}
                 onValueChange={handleSliderChange}
                 className="min-w-36"
@@ -70,6 +72,8 @@ export default function Filtermenu() {
                 className="min-w-20"
                 type="number"
                 defaultValue={9999}
+                min={minPrice + 1}
+                max={9999}
               />
             </NavigationMenuContent>
           </NavigationMenuItem>
diff --git a/src/components/ui/slider.tsx b/src/components/ui/slider-two-thumbs.tsx
similarity index 58%
rename from src/components/ui/slider.tsx
rename to src/components/ui/slider-two-thumbs.tsx
index 72bf374..6cff4d0 100644
--- a/src/components/ui/slider.tsx
+++ b/src/components/ui/slider-two-thumbs.tsx
@@ -1,11 +1,11 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as SliderPrimitive from "@radix-ui/react-slider"
+import * as React from "react";
+import * as SliderPrimitive from "@radix-ui/react-slider";
 
-import { cn } from "~/lib/utils"
+import { cn } from "~/lib/utils";
 
-const Slider = React.forwardRef<
+const SliderTwoThumbs = React.forwardRef<
   React.ElementRef<typeof SliderPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
 >(({ className, ...props }, ref) => (
@@ -13,7 +13,7 @@ const Slider = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex w-full touch-none select-none items-center",
-      className
+      className,
     )}
     {...props}
   >
@@ -21,8 +21,9 @@ const Slider = React.forwardRef<
       <SliderPrimitive.Range className="absolute h-full bg-slate-900 dark:bg-slate-50" />
     </SliderPrimitive.Track>
     <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-slate-900 bg-white ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:border-slate-50 dark:bg-slate-950 dark:ring-offset-slate-950 dark:focus-visible:ring-slate-300" />
+    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-slate-900 bg-white ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:border-slate-50 dark:bg-slate-950 dark:ring-offset-slate-950 dark:focus-visible:ring-slate-300" />
   </SliderPrimitive.Root>
-))
-Slider.displayName = SliderPrimitive.Root.displayName
+));
+SliderTwoThumbs.displayName = SliderPrimitive.Root.displayName;
 
-export { Slider }
+export { SliderTwoThumbs };