Slider - Copy this React, Tailwind Component to your project

Create a slider component with 4 checkpoints , first point is Pending , Second is Started , Third is Running and last one is completed , when the user will slide it smoothly it will stop at each check point first , also i want to pass the status data to somewhere else , so export props . Also when the slider bar shifts , use gradient colors between each checkpoint. Also note that , i want a smooth transition when user drags it. Also note that , one a check point is reached , it cannot reverse back