Горизонтальный ползунок
 

Здраствуйте, я написал самый простой и нубский код, помогите мне пожалуйста, его оптимизоровать, вот ссылочка как выглядеит ползунок

Я хотел чтобы при щелчке, увеличивался одновременно шрифт и ползунок переходил бы до даты.

И еще вопрос что делать если страница адаптивная, как поступить с позунком.

Это ползунко выполяет роль слайдера, в низу будет блок, и когда человек щелкает на него, появляется блок, но блок будет стоят на месте, меняться будет по средством FadeIn и FadeOut

$('.date1').click(function () {
			$('.line_dot').animate({ left: 33 }, 500, "easeInOutSine");
			$('.date1').css({"font-size": "42px", "margin-top": "-13px"});
			$('.date2').css({"font-size": "30px", "margin-top": "0"});
			$('.date3').css({"font-size": "30px", "margin-top": "0"});
			$('.date4').css({"font-size": "30px", "margin-top": "0"});
			$('.date5').css({"font-size": "30px", "margin-top": "0"});
			$('.date6').css({"font-size": "30px", "margin-top": "0"});
		});
		$('.date2').click(function () {
			$('.line_dot').animate({ left: 233 }, 500, "easeInOutSine");
			$('.date2').css({"font-size": "42px", "margin-top": "-13px"});
			$('.date1').css({"font-size": "30px", "margin-top": "0"});
			$('.date3').css({"font-size": "30px", "margin-top": "0"});
			$('.date4').css({"font-size": "30px", "margin-top": "0"});
			$('.date5').css({"font-size": "30px", "margin-top": "0"});
			$('.date6').css({"font-size": "30px", "margin-top": "0"});
		});

Это слишком, тем более что параметры одни и те же.

Надо было использовать .addClass, наверное...

И что это даст, если не анимировать? Нужно сделать единый обработчик, в котором изменяемые параметры left: 33, 233 ... указывает источник.