I’m still getting used to Typescript in my NextJS app and can’t get past this TS error. It’s for the line value={value}
in <Slider.Root>
value
is an object with 2 number elements: a min
and a max
.
I modified the interface of SliderProps
below to make value
a number array (it was just a number before), and played around with a few other ways to approach this problem but am stuck after several hours.
Type '(number | undefined)[]' is not assignable to type 'number[]'.
Type 'number | undefined' is not assignable to type 'number'.
Type 'undefined' is not assignable to type 'number'.
SliderRange function — where problem is
export function RangeSlider(props?: any) {
const { start, range, canRefine, refine } = useRange(props);
const { min, max } = range;
const [value, setValue] = useState([min, max]);
const from = min;
const to = max;
useEffect(() => {
if (from && to) {
setValue([
parseFloat((from / 100).toFixed(2)), // Format to 2 decimals
parseFloat((to / 100).toFixed(2))
]);
}
}, [from, to]);
return (
<div className="slider-container">
<Slider.Root
className="slider-root"
min={min ? min / 100 : 0}
max={max ? max / 100 : 100}
value={value} // <---- PROBLEM HERE.
onValueChange={(newValue) => setValue([newValue[0], newValue[1]])}
onValueCommit={(newValue) => refine([newValue[0] * 100, newValue[1] * 100])}
disabled={!canRefine}
minStepsBetweenThumbs={15}
>
<Slider.Track className="slider-track">
<Slider.Range className="slider-range" />
</Slider.Track>
<Slider.Thumb className="slider-thumb" />
<Slider.Thumb className="slider-thumb" />
</Slider.Root>
</div>
);
}
Interface of SliderProps — where type value
is set
export interface SliderProps extends Omit<SliderHorizontalProps | SliderVerticalProps, keyof SliderOrientationPrivateProps | 'defaultValue'> {
min?: number;
max?: number;
step?: number;
minStepsBetweenThumbs?: number;
value?: number[];
defaultValue?: number[];
onValueChange?(value: number[]): void;
onValueCommit?(value: number[]): void;
inverted?: boolean;
}
2
Answers
See https://www.algolia.com/doc/api-reference/widgets/range-slider/react/?client=ts
Your component acccepts
props?: any
, which can be undefined. So the result ofuseRange
may also be undefined, in this casemin
andmax
can be undefined, the state may be initialized undefined, so value may be undefined.Setting a concrete type should work:
You can try the following: