Looking for suggestions on creating a visually appealing volume meter bar using Reactjs and Material ui. I have a basic implementation with LinearProgress, but now I want to upgrade it with a new design. Any tips on how to achieve this using Material-ui? All suggestions are welcome!
Basic Code:
class AudioProgress extends Component {
render() {
const { classes } = this.props;
return (
<LinearProgress variant="determinate" value={10} className="audio-meter"/>
);
}
}
export default withStyles(styles)(AudioProgress);
UPDATE: I've added some HTML to get started with the progress bar. Now, I need suggestions on how to update/change it for color updates. Any further ideas?
Starter Code:
render() {
const value = 20;
return (
<div class="container">
<div class="progress-segment">
<div class="item "></div>
<div class="item "></div>
...
<div class="item"></div>
</div>
</div>
);
}
Design: https://i.sstatic.net/PuzwF.png
New Design: https://i.sstatic.net/xGnCS.png