Custom Slider - Copy this React, Mui Component to your project

Generate a slider with 4 checkpoint , label them as Pending , Started , Running , Completed . once user slides the slider to a checkpoint , it shall not allow to go back . data will be stored in state and exported as prop. use suitable color also for each checkpoint and as the slider bar increases , use gradient color effect for it.