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. Also note that , slider moves along with drag and smooth transition. also add a update Status button to apply the status , just for confirmation.