Fader
Version 1.00
written by Gerald Holdsworth

This is like a fader, or slider, found in Mac OS X (or similar to the volume control in Windows) to set certain settings.

Click here for a demo

Stylesheet for 'Fader':
.drag
{
 position: relative;
 cursor: pointer;
}
Javascript for 'Fader':
// Run createFader(el,type,border,height,width,scale,faderwidth,function,initialvalue) to create a fader
// el : sibling element to fader control (the fader will add itself as a child to the parent of el)
// type : 1 = no graphics, 2 = using graphics
// height,width : size of total control, less 2 x border
// scale : maximum value from fader
// faderwidth : width of the actual fader
// function : function to run when fader is moved - this will also be the element id of the control
// initialvalue : what to set the fader to on start
//
startPos=0;
offsetPos=0;
fader_el=null;
function OnMouseDown(e)
{
 if (e==null) e=window.event;
 fader_el=e.target!=null?e.target:e.srcElement;
 if ((e.button==1 && window.event!=null || e.button==0) && fader_el.className=='drag')
 {
  startPos=mouseX(e);
  offsetPos=getNumber(fader_el.style.left);
  fader_el.parentNode.onmousemove=OnMouseMove;
  fader_el.parentNode.focus();
  document.onselectstart=function(){return false;};
  fader_el.ondragstart=function(){return false;};
  return false;
 }
}
function OnMouseMove(e)
{
 if (e==null) e=window.event;
 scale=fader_el.parentNode.getAttribute('scale');
 if (fader_el.style.backgroundImage=='')
  ul=parseInt(fader_el.parentNode.style.width)-(parseInt(fader_el.style.width)*2);
 else
  ul=parseInt(fader_el.parentNode.style.width)-parseInt(fader_el.style.width);
 x=(offsetPos+mouseX(e)-startPos);
 if (x>=0 && x<=ul)
 {
  value=Math.round((scale/ul)*x);
  x=value/(scale/ul);
  fader_el.style.left=x+'px';
  f=fader_el.id;
  eval(f+'('+value+')');
 }
}
function OnMouseUp(e)
{
 if (fader_el!=null)
 {
  fader_el.parentNode.onmousemove=null;
  document.onselectstart=null;
  fader_el.ondragstart=null;
  fader_el=null;
 }
}
function mouseX(evt)
{
 mx=0;
 if (evt.pageX) mx=evt.pageX;
 else if (evt.clientX) mx=evt.clientX+(document.documentElement.scrollLeft?document.documentElement.scrollLeft:document.body.scrollLeft);
 return mx;
}
function getNumber(value)
{
 n=parseInt(value);
 return n==null || isNaN(n)?0:n;
}
function createFader(s_el,t,bord,h,w,scale,fader,id,initvalue)
{
 if (t>2) t=2;
 if (t<1) t=1;
 if (t==2)
 {
  bord=0;
 }
 el=document.createElement('div');
 el.style.float='none';
 el.style.border=bord+'px solid';
 el.style.height=h+'px';
 el.style.width=w+'px';
 el.style.overflow='hidden';
 if (t==1)
  el.style.backgroundColor='#CCCCCC';
 if (t==2)
 {
  el.style.backgroundImage='url(fader.gif)';
  el.style.backgroundRepeat='no-repeat';
  el.style.backgroundSize=w+'px '+h+'px';
 }
 el.onmousedown=OnMouseDown;
 el.setAttribute('scale',scale);
 s_el.parentNode.appendChild(el);
 if (t==1)
 {
  e=document.createElement('div');
  e.style.border='1px solid';
  e.style.backgroundColor='#777777';
  e.style.height='2px';
  e.style.position='relative';
  e.style.top=Math.round((h-4)/2)+'px';
  e.style.left='2px';
  e.style.width=(w-6)+'px';
  el.appendChild(e);
  e=document.createElement('div');
  e.style.borderTop='none';
  e.style.borderBottom='none';
  e.style.borderLeft=(fader/4)+'px solid';
  e.style.borderRight=(fader/4)+'px solid';
  e.style.borderRadius=(fader/4)+'px';
  e.style.backgroundColor='#0000DD';
  e.style.color='#0000FF';
  e.style.textAlign='center';
  e.style.height=(h-4)+'px';
  e.style.width=(fader/2)+'px';
  e.style.top='-2px';
 }
 if (t==2)
 {
  e=document.createElement('div');
  e.style.backgroundImage='url(control.gif)';
  e.style.backgroundRepeat='no-repeat';
  e.style.backgroundSize=fader+'px '+h+'px';
  e.style.height=h+'px';
  e.style.width=fader+'px';
  e.style.top='0px';
 }
 e.style.left=Math.round(initvalue/(scale/(w-parseInt(e.style.width))))+'px';
 e.className='drag';
 e.setAttribute('id',id);
 el.appendChild(e);
 eval(id+'('+initvalue+')'); 
}
document.onmouseup=OnMouseUp;
// Create your functions here to process what the fader returns (x is the value).
function updateDetails(x)
{
 switch (x)
 {
  case 0: t='Zero';break;
  case 1: t='One';break;
  case 2: t='Two';break;
  case 3: t='Three';break;
  case 4: t='Four';break;
  case 5: t='Five';break;
  case 6: t='Six';break;
  case 7: t='Seven';break;
  case 8: t='Eight';break;
  case 9: t='Nine';break;
  case 10: t='Ten';break;
  default: t='Invalid';
 }
 document.getElementById('testData').innerHTML=t;
}
function updateDetails2(x)
{
 document.getElementById('testData2').innerHTML=x;
}
Click here to download.

If you would like to email me, put gerald@ in front of the domain name, insead of www..
©2011-2020 Gerald Holdsworth IT Services