---

function slider(){

this.max=100;
this.min=0;
this.multiplyer=1;
this.relativePosition=this.max*this.multiplyer;
this.oldMouseX;
this.oldMouseY;
this.knobTrack = document.createElement('div');
this.knob = document.createElement('div');
this.knobTrack.appendChild(this.knob);
document.body.appendChild(this.knobTrack);

this.percent = document.createElement('div');
}

slider.prototype.max;
slider.prototype.min;
slider.prototype.multiplyer;
slider.prototype.relativePosition;
slider.prototype.oldMouseX;
slider.prototype.oldMouseY;
slider.prototype.knobTrack;
slider.prototype.knob;

slider.prototype.renderSlider = function(){

this.knobTrack.style.fontSize="10px";
this.knobTrack.style.height="10px";
this.knobTrack.style.width="122px";
this.knobTrack.style.position="absolute";
this.knobTrack.style.border="1px solid #000000";
this.knobTrack.style.backgroundColor="CCCCCC";

this.knob.style.fontSize="10px";
this.knob.style.height="10px";
this.knob.style.width="20px";
this.knob.style.position="relative";
this.knob.style.backgroundColor="#CCCCCC";
this.knob.style.borderLeft="2px solid #EEEEEE";
this.knob.style.borderTop="2px solid #EEEEEE";
this.knob.style.borderRight="2px solid #444444";
this.knob.style.borderBottom="2px solid #444444";
//this.knob.onmouseout=this.makeUnDraggable;
this.knob.onmouseup=this.makeUnDraggable;
this.knob.onmousedown=this.makeDraggable;
}

slider.prototype.makeDraggable = function(){
this.oldMouseX=event.clientX;
//alert("entered makeDraggable");
this.knob.onmouseup=this.makeUnDraggable;
this.knob.onmouseout=this.makeUnDraggable;
this.knob.onmousemove=this.moveSlider;
}

slider.prototype.makeUnDraggable = function(){
//alert("Entereing makeundraggable");
this.knob.onmousemove = null;
this.knob.onmouseup = null;
}

slider.prototype.moveSlider = function(){
this.knob.style.position = "relative";
this.relativePosition=event.srcElement.offsetLeft+event.clientX-this.oldMouseX;
this.oldMouseX=event.clientX;
stat= this.knob.className + " width: " + this.knob.clientWidth;
stat= stat + "; Mouse location: " + event.clientX;
window.status=stat;
if (this.relativePosition >= this.max*this.multiplyer){
this.relativePosition = this.max*this.multiplyer;
}
else if (this.relativePosition <= this.min){
this.relativePosition = this.min;
}

this.knob.style.left=this.relativePosition;
this.percent.innerHTML = this.relativePosition/this.multiplyer + "%";
}

---