[Moloch]

Здравствуйте, подскажите пожалуйста как решить такую задачу. есть элемент range, 2 списка - в первом слово, dj втором описание к нему. Также в низу есть 2 кнопки: вперед и назад. при изменении положения ползуна должны поочередно менять background элементы списка. При клике на элемент списка со словом, должно меняться положение ползуна. При клике на кнопку "вперед" , должен поменяться бэкграунд у следующего элемента списка. Как связать работу этих трех элементов (ползуна, списка и кнопки) чтобы они работали синхронно. Может быть не стоило делать последовательное выполнение событий при наступлении одного из них?

<input id='polzun'type="range" name="quantity">
			<h3>Определение</h3>
			<ul id ="spisok">
				<li >Строители</li>
				<li >Слон</li>
				<li >Соседи</li>
				<li >Рояль</li>
				<li >Рукокрылая свинья</li>
			</ul>
			<h3>Пояснение</h3>
			<ul id ="opredelenie">
				<li> <span>Курили бетон</span> </li>
				<li ><span>Сильный он</span></li>
				<li ><span>Клопы и медведи</span></li>
				<li ><span>Украли через форточку</span></li>
				<li ><span>Уселась на жордочку</span></li>
			</ul>
			<button id="prev">Назад</button>
			<button id="next">Вперед</button>

$(function() {
			

/********************************************************/
	$("#polzun").attr('max',$('#spisok li').length-1);
	$("#polzun").attr('min','0');
	$("#polzun").val('0');

	var spisok = $('#spisok li');
	var opredelenie = $('#opredelenie li');
	var length = $('#spisok li').length;
	var index =0;
	var buf=0;
		$("#polzun").on('change',function(){
				var z=$(this).val();
				spisok.eq(z).addClass('colorli').siblings().removeClass('colorli');
				index =z;
				opredelenie.eq(z).show().siblings().hide();
		})
		.trigger('change');
/****************************************************/
		$('#spisok').on('click.spisok','li',function(){

			if ($(this).hasClass('clicked')){
				 buf = index;
			}
			else {
				buf= spisok.index( this );
				
			}
			$(this).toggleClass('clicked');
			
			//console.log(index);
			$("#polzun")
				.val(buf)
					.trigger('change');		
		});
/***************************************************************************/

	$('#next').on('click.button', function(){
			if (index <(length-1) ) {
				index++;
			}
			else {
				index=0;
			}
			//spisok.eq(index).toggleClass('clicked');
			console.log(index);
			spisok .next().trigger('click.spisok');

	});
		});