How do I create a toggle slider?

Hey,

I want to create a slider which should look like this After Effects animation I did: https://dominikdelgado.com/wp-content/uploads/2020/09/IntegralMap-Slider-Animation.mp4

The website seen in the animation already exists besides the silder: https://integralmap.one

The silder on the left should trigger different id’s from the javascript of my 3D model, which show or hide the different layers of my model. Through the slider the user should be able to switch between the different layers of the 3D model.

The part I don’t know is: How can I build a silder (like visualized in the animation) where one can use the mouse to push the circle-indicator up and down and where the indicator snaps into 12 different positions (according to the 12 different layers of the 3D model) while triggering the right id’s?

I hope my question was clear and someone can help me out with that. It would be greatly appreciated!

Kind regards

Dominik :relaxed: