rannes.dev/wine-shop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed inputs to bind to value rather than state.
All checks were successful
Vercel Production Deployment / Deploy-Production (push) Successful in 1m12s
Details

Browse Source 
fixed min and max for inputs
This commit is contained in:
ChrQR 2024-05-28 12:37:58 +02:00
parent f266c590f5
commit a61a65aab0
2 changed files with 17 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/app/_components/FilterMenu.tsx
View File

@ -8,7 +8,7 @@ import {
} from "~/components/ui/navigation-menu"; } from "~/components/ui/navigation-menu";
import { Input } from "~/components/ui/input"; 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 { ChangeEvent, useState } from "react";
import useFilterStore from "../store"; import useFilterStore from "../store";
@ -36,7 +36,7 @@ export default function Filtermenu() {
setSliderValues(values); setSliderValues(values);
setMinPrice(values[0]); setMinPrice(values[0]);
setMaxPrice(values[1]); setMaxPrice(values[1]);
setStorePrice(minPrice, maxPrice); setStorePrice(values[0], values[1]);
}; };
return ( return (
@ -55,8 +55,10 @@ export default function Filtermenu() {
className="min-w-20" className="min-w-20"
type="number" type="number"
defaultValue={0} defaultValue={0}
min={0}
max={maxPrice - 1}
/> />
<Slider <SliderTwoThumbs
value={sliderValues} value={sliderValues}
onValueChange={handleSliderChange} onValueChange={handleSliderChange}
className="min-w-36" className="min-w-36"
@ -70,6 +72,8 @@ export default function Filtermenu() {
className="min-w-20" className="min-w-20"
type="number" type="number"
defaultValue={9999} defaultValue={9999}
min={minPrice + 1}
max={9999}
/> />
</NavigationMenuContent> </NavigationMenuContent>
</NavigationMenuItem> </NavigationMenuItem>

19
src/components/ui/slider.tsx → src/components/ui/slider-two-thumbs.tsx
View File

@ -1,11 +1,11 @@
"use client" "use client";
import * as React from "react" import * as React from "react";
import * as SliderPrimitive from "@radix-ui/react-slider" 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.ElementRef<typeof SliderPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
>(({ className, ...props }, ref) => ( >(({ className, ...props }, ref) => (
@ -13,7 +13,7 @@ const Slider = React.forwardRef<
ref={ref} ref={ref}
className={cn( className={cn(
"relative flex w-full touch-none select-none items-center", "relative flex w-full touch-none select-none items-center",
className className,
)} )}
{...props} {...props}
> >
@ -21,8 +21,9 @@ const Slider = React.forwardRef<
<SliderPrimitive.Range className="absolute h-full bg-slate-900 dark:bg-slate-50" /> <SliderPrimitive.Range className="absolute h-full bg-slate-900 dark:bg-slate-50" />
</SliderPrimitive.Track> </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.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> </SliderPrimitive.Root>
)) ));
Slider.displayName = SliderPrimitive.Root.displayName SliderTwoThumbs.displayName = SliderPrimitive.Root.displayName;
export { Slider } export { SliderTwoThumbs };