Уроки PHP, Mootools, JavaScript, ActionScript, HTML, CSS

<!--Вертикальный слайдер-->
<div id="slider">
<div id="knob"></div>
</div>

//полоса прокрутка или слайдер
#slider {
	background-color: #00C;
	border: 1px dashed black;
	height:25px;
	width:250px;
}
//"захват" или ручка
#knob {
	background-color:#FF0;
	height:25px;
	width:25px;
}

//создаем переменные для наших блоков
var sliderObject = $('slider');
var knobObject = $('knob');
 
//создаем новый объект slider
//но вначале, определяем элементы слайдера
//а потом определяем объект захвата
var SliderObject = new Slider(sliderObject , knobObject , {
    //а вот и параметры
    //ниже каждый из них рассматривается более подробно
    range: [0, 10],
    snap: true,
    steps: 10,
    offset: 0,
    wheel: true,
    mode: 'horizontal',
    //событие onchange запускается тогда, когда значение параметра step изменится
    //и передаст текущее значение этому параметру
    onChange: function(step){
        //сюда вставляем код того, что должно произойти по событию onchange
        //можно ссылаться на параметр step
    },
    //событие onTick передвигается, когда пользователь передвигает захват
    //и передаст текущее положение (относительно родительского элемента)
    onTick: function(pos){
	//это необходимо для того, чтобы захват настроился
        //ниже остановимся на этом вопросе более подробно
	this.knob.setStyle('left', pos);
    },
    //срабатывает, когда ползунок останавливается
    //и пользователь "отпускает" его
    onComplete: function(step){
        //сюда вставляем код того, что должно произойти по событию onComplete
        //можно ссылаться на параметр step
    }
});

window.addEvent('domready', function() {
	var SliderObject = new Slider('slider-h', 'knob-h', {
		range: [0, 10],
		snap: false,
		steps: 10,
		offset: 0,
		wheel: true,
		mode: 'horizontal',
	    onChange: function(step){
			$('change').highlight('#F3F825');
			$('steps_number').set('html', step);
	    },
	    onTick: function(pos){
			$('tick').highlight('#F3F825');
			$('knob_pos').set('html', pos);
			this.knob.setStyle('left', pos);
 
	    },
	    onComplete: function(step){
			$('complete').highlight('#F3F825')
			$('steps_complete_number').set('html', step);
			this.set(step);
    	}
	});
 
	var SliderObjectV = new Slider('slider-v', 'knob-v', {
		range: [-10, 0],
		snap: true,
		steps: 10,
		offset: 0,
		wheel: true,
		mode: 'vertical',
	    onChange: function(step){
			$('changeV').highlight('#F3F825');
			$('stepsV_number').set('html', step*-1);
	    },
	    onTick: function(pos){
			$('tickV').highlight('#F3F825');
			$('knobV_pos').set('html', pos);
			this.knob.setStyle('top', pos);
 
	    },
	    onComplete: function(step){
			$('completeV').highlight('#F3F825')
			$('stepsV_complete_number').set('html', step*-1);
			this.set(step);
    	}
	});
 
	SliderObjectV.set(0);
	$('set_knob').addEvent('click', function(){
		SliderObject.set(7);
	});		
	$('set_knobV').addEvent('click', function(){
		//чтобы установить ползунок на 5, нужно установить его на -5
		//т.к. в нашем случае идет поднятие ползунка вверх, а это значит мы уходим
		//по ту сторону нуля
		SliderObjectV.set(-5);
	});
 
});

<div id="slider_wrap">
	<div id="change" class="indicator"><strong>onChange</strong> передаёт шаг, на котором Вы находитесь: <span id="steps_number"> </span></div>
	<div id="tick" class="indicator"><strong>onTick</strong> передаёт положение ползунка: <span id="knob_pos"> </span></div>
	<div id="complete" class="indicator"><strong>onComplete</strong> передаёт текущий шаг: <span id="steps_complete_number"> </span></div>
	<div id="slider-h">
		<div id="knob-h"></div>
	</div>
	<button id="set_knob" class="b">Установить ползунок на 7-й шаг</button>
	<div id="changeV" class="indicator"><strong>onChange</strong> передаёт шаг, на котором Вы находитесь: <span id="stepsV_number"> </span></div>
	<div id="tickV" class="indicator"><strong>onTick</strong> передаёт положение ползунка: <span id="knobV_pos"> </span></div>
	<div id="completeV" class="indicator"><strong>onComplete</strong> передаёт текущий шаг: <span id="stepsV_complete_number"> </span></div>
	<button id="set_knobV" class="b">Установить ползунок на 5-й шаг</button>
	<div id="slider-v">
		<div id="knob-v"></div>
	</div>
</div>