How to create a rating bar(Or linear gauge) using material UI (React)

Question

I am new to React, I want to create a rating bar like this:

I want to use material UI, but I didn't find a component like this. I found a rating UI component: https://material-ui.com/components/rating/. but I need the UI to be like a linear gauge and change color with a different number (1/5, 2/5,3/5,4/5,5/5).

Actually, I already used the rating component:

                <Grid item xs={6} className={classes.overAllScoreValueContainer}>
                    <Box component="fieldset" marginLeft={0} marginTop={0.25} padding={0} borderColor="transparent">
                        <Rating
                            name="overall-score"
                            value={this.state.overAllRating}
                            readOnly
                            size={"large"}
                            classes={{
                                iconFilled: this.props.classes.iconFilled,
                                iconHover: this.props.classes.iconHover
                            }}
                        />
                    </Box>
                </Grid>

but the UI is not correct.

anyone can help?

Thank you for pointing out using the progress bar in material UI. I can make the shape like what shown in the picture, but how to change color according to the value?? please check this: https://codesandbox.io/s/charming-water-cx6dd?file=/demo.js

Answer 1

You can use material ui progress... see the document. https://material-ui.com/components/progress/#progress

You can also customize it.