So, I have tried everything but cannot figure this out at all.
I have this reusable component made with ShadCn Slider,
function SliderWithCounter({ min, max, step = 1, onChange, value }: any) {
const [sliderValue, setSliderValue] = useState(min);
const handleChange = (newValue: any) => {
console.log("SliderWithCounter - newValue:", newValue);
setSliderValue(newValue);
onChange(newValue);
};
const handleIncrement = () => {
setSliderValue(Math.min(sliderValue + step, max));
};
const handleDecrement = () => {
setSliderValue(Math.max(sliderValue - step, min));
};
return (
<div className="flex flex-row justify-between items-center gap-2 ">
<TooltipProvider>
<Tooltip>
<TooltipTrigger type="button">
<Slider
value={[sliderValue]}
defaultValue={[min]}
max={max}
step={step}
onChange={handleChange}
className="w-[250px] md:flex hidden"
/>
</TooltipTrigger>
<TooltipContent sideOffset={5}>{sliderValue}</TooltipContent>
</Tooltip>
</TooltipProvider>
<div className="flex flex-row gap-2 items-center justify-center">
<Button onClick={handleIncrement} variant={"outline"} type="button">
+
</Button>
<Input
value={sliderValue}
className="md:w-[60px]"
onChange={(e) => setSliderValue(e.target.value)}
/>
<Button onClick={handleDecrement} variant={"outline"} type="button">
-
</Button>
</div>
</div>
);
}
export default SliderWithCounter;
The UI portion of this works perfectly, the slider moves, the input field value updates and vice-versa.
But now I import this into my form:
<FormField
control={form.control}
name="batchSize"
render={({ field }) => {
return (
<FormItem>
<FormLabel className="flex flex-row items-center gap-2">
Batch size
<ToolTipComponent tooltipText="Number of images" />
</FormLabel>
<FormControl>
<SliderWithCounter
min={1}
max={20}
onChange={(value: any) => {
console.log("FormField - onValueChange:", value);
field.onChange(value);
}}
step={1}
/>
</FormControl>
<FormMessage />
</FormItem>
);
}}
/>
formSchema: batchSize: z.array(z.number()),
And the default value for this is batchSize: [],
Now the onChange of the form never fires, I cannot see the console.log ever, I want the values to be updated to use in my form, but I have no idea how to fix this. Thanks for your help!