React/Material-UI: How to fix <slider> to work with custom data?

Question

Trying to user Material-UI slider to display API data, They key thing is, the slider is non-interactive. it's only use to display data.

I keep getting this error:

Slider.js:91 Uncaught TypeError: nearest.toFixed is not a function
    at roundValueToStep (Slider.js:91)
    at getFingerNewValue (Slider.js:639)
    at Slider.js:788

I'm also not sure what to use as the key value for my list.

I've added some code below to reproduce the problem along with data. codesandbox: link here!

Here is my original code:

    useEffect(() => {
        const fetchData = async () => {
          const response = await axiosInstance.get(URL + slug)
          const result = response.data;
          setData(result);  
        };
  
        fetchData();
      }, []);

    return (
        <>
        <Container>
        <Grid>
        <Paper>
            <List dense component="div" role="list">
            {
            data?.map(data =>
                <ListItem key={data} role="listitem">
                    <Slider valueLabelDisplay="auto" value={data.adj_close} min={data.week52low} max={data.week52high} aria-labelledby="continuous-slider" />            
                </ListItem>)       
            }
            </List> 
        </Paper>
        </Grid>
        </Container>

        </>
      );
}         

Looking at the error above, the slider API is trying to round the steps? I digged deeper into the API: https://material-ui.com/api/slider/ , but wasn't able to really reproduce anything to help solve my issue. How can I get my data to display using these sliders?

Answer 1

Convert your value,min,max prop that you are putting in slider(data.adj_close) to a number you can achieve it by writing in this way

 useEffect(() => {
        const fetchData = async () => {
          const response = await axiosInstance.get(URL + slug)
          const result = response.data;
          setData(result);  
        };
  
        fetchData();
      }, []);

    return (
        <>
        <Container>
        <Grid>
        <Paper>
            <List dense component="div" role="list">
            {
            data?.map(data =>
                <ListItem key={data} role="listitem">
                    <Slider valueLabelDisplay="auto" value={Number(data.adj_close)} min={Number(data.week52low)} max={Number(data.week52high)} aria-labelledby="continuous-slider" />            
                </ListItem>)       
            }
            </List> 
        </Paper>
        </Grid>
        </Container>

        </>
      );
}    

This will remove the error