Timeline Effect for site

I am creating a historical time line site similar to the image attached. There will be a main time line across the center of the page with buttons that allow the user to click to the next or previous decade. There is also a smaller time line above that will show the user where they are but they will also be able to click and drag the smaller version to navigate the main time line. My question is how do I tie the smaller time line to the larger one? How do I make it so that when you click on the main time line to go to the next decade it also moves the one up top in relation to where you are? All of the info will be pulled from XML and there will be a mask that moves to reveal the different sections of the site. Thank you!