skip to Main Content

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


  1. 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 of useRange may also be undefined, in this case min and max can be undefined, the state may be initialized undefined, so value may be undefined.

    Setting a concrete type should work:

    export function RangeSlider(props: UseRangeSliderProps) {
    
    Login or Signup to reply.
  2. You can try the following:

    const [value, setValue] = useState([min ?? 0, max ?? 100]);
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search