fixed inputs to bind to value rather than state.
All checks were successful
Vercel Production Deployment / Deploy-Production (push) Successful in 1m12s
All checks were successful
Vercel Production Deployment / Deploy-Production (push) Successful in 1m12s
fixed min and max for inputs
This commit is contained in:
parent
f266c590f5
commit
a61a65aab0
@ -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>
|
||||||
|
@ -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 };
|
Loading…
Reference in New Issue
Block a user