fixed inputs to bind to value rather than state.

fixed min and max for inputs

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>

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 };