Слайдер

Слайдер

В действии

Не идеально и может не работать в IE и Opera

Код

<script>
var Js = {
version:'1.0.0',
alert : function(text) {alert(text);},
int:function(value){return parseInt(value);},
get:function(id){return document.getElementById(id);},
onReady:function(func){			
			switch (typeof func)
			{
				case "function": window.onload = eval(func);
								break;
				default:alert('Неверный тип параметра для onReady\n'+func+"\n"+typeof func+"\n");
				
			}
		},
slider:function(parametrs) {
			var param=parametrs,
			id,
			width,
			height,
			value;			
			if(typeof param == 'object'){
				param.id?id=param.id:alert("Не задан id для slider");
				param.width?width=param.width:width=120;
				param.height?height=param.height:height=100;
				param.value?value=param.value:value=0;
				param.idValue?idValue=param.idValue:idValue=undefined;
				var d = document;				
				var slider = d.createElement('DIV'); 
				slider.id = id + '_slider';
				slider.className = 'slider roundCornerAll';
				var ref=Js.get(id);
				ref.appendChild(slider);
				
				slider.style.width = width+'px';
				slider.style.height = height+'px';
				
				var knob = d.createElement('DIV');
				knob.id = id + '_knob';
				knob.className = 'knob roundCornerAll';
				slider.appendChild(knob); // добавляем его в документ	
				knob.style.left=value-(height+2)/2;
				knob.style.width=height+2;
				knob.style.height=height+2;			   							
				var sliderMove=false;
				var sliderWidth=Js.int(slider.style.width);
				var knobWidth=Js.int(knob.style.width);
				if(idValue!=undefined){Js.get(idValue).innerHTML=Js.int(knob.style.left)+knobWidth/2;}
				function  setValue(value)
				{	
					var sliderWidth=Js.int(slider.style.width);
					var knobWidth=Js.int(knob.style.width);
					if(value < -knobWidth/2) knob.style.left = -knobWidth/2;
					else if(value > sliderWidth - knobWidth/2){ knob.style.left = sliderWidth - knob.Width/2;}
					else { knob.style.left =value;}
					if(idValue!=undefined){Js.get(idValue).innerHTML=Js.int(knob.style.left)+knobWidth/2;}
				}
				
				slider.onmousedown = function  sliderClick(e) {
					var value =e.clientX - ref.offsetLeft - Js.int(knob.style.width)/2;					
					setValue(value);
					sliderMove=true;
				}
				slider.onmouseup= function(){sliderMove=false;}				
				knob.onmousedown = function(){sliderMove=true;}
				knob.onmouseup   = function(){sliderMove=false;}
				slider.onmousemove = function(e) {
					if(sliderMove){						
						var value =e.clientX - ref.offsetLeft - Js.int(knob.style.width)/2;
						setValue(value);						
					}
				}
				document.onmouseup=function(){sliderMove=false;}
			}
			
			
		}
}

Js.onReady(function(){

Js.slider({id:'s1',idValue:'value',width:200,height:10,value:0}); 
});
</script>
<style>
.roundCornerAll{-moz-border-radius:4px;-webkit-border-radius: 4px;}

.knob{position: relative;background-image: url('knob.png');border:1px solid #CCCCCC;top:-0.15em;cursor:pointer;}

.slider{width:100; height:7;border:1px solid #DDDDDD;background:url('sliderBackground.png') repeat-x scroll 50% top #EEEEEE;}
</style>

<div id="s1"></div>
<div id="value"></div>

Полезные сылки

Очень полезный сайт
JQuery Slider