function slide( name, min, max, step, func, after, before, font, Fcolor, Scolor, Sborder, Pcolor, Pborder, Hcolor ) {

 name = typeof name==='string' ? name : 'slider';    //  class of the element(s) to build sliders for
 min = typeof min==='number' ? min : 0;    //  the value at the low end of the range
 max = typeof max==='number' ? max : 100;    //  the value at the high end of the range
 step = typeof step==='number' ? step : 1;    //  amount by which to decrease or increase a value
 func = typeof func==='function' ? func : null;    //  function to run when slider is moved
 before = typeof before==='string' ? before : '';    //  text to display in front of the value, such as a currency
 after = typeof after==='string' ? after : '%';    //  text to display after the value, such as a unit
 font = typeof font==='string' ? font : 'message-box';    //  font used for display of the text
 Fcolor = typeof Fcolor ==='string' ? Fcolor : '#000000';    //  color used for the text
 Scolor = typeof Scolor ==='string' ? Scolor : '#e6eeee';    // background color of the slider
 Sborder = typeof Sborder ==='string' ? Sborder : '1px outset darkred';    //  border of the slider, width must be in px
 Pcolor = typeof Pcolor ==='string' ? Pcolor : '#c6cece';    // background color of the indicator
 Pborder = typeof Pborder ==='string' ? Pborder : '1px outset darkred';    //  border of the indicator, width must be in px
 Hcolor = typeof Hcolor ==='string' ? Hcolor : '#ff9990';    // background color of the highlighted indicator

 var d = document, a = d.getElementsByTagName( 'input' ), i = a.length,
  ob = null, p = 'px', r = new RegExp( '\\b' + name + '\\b' ), h, j, q, v,
  b = d.createElement( 'div' ), c = b.cloneNode( false ), s = b.style;

 function l(o) {
  var x = 0, y = 0, w = o.offsetWidth, h = o.offsetHeight;
  do { x += o.offsetLeft; y += o.offsetTop; }
   while ( ( o = o.offsetParent ) );
  return { x: x, y: y, w: w, h: h };
 }
 function f(c) { this.el.firstChild.style.background = Hcolor; }
 function g() { this.el.firstChild.style.background = Pcolor; }
 function k(e) { if( ob ) {
  e = e || window.event || {};
  var r = /^[^\d-]*(-?\d+)\D*$/, x = +this.value.replace( r, '$1' ); 
  if( e.keyCode===37 || e.keyCode===40 ) { x -= ob.step; }
  if( e.keyCode===38 || e.keyCode===39 ) { x += ob.step; }
  x = Math.max( ob.min, Math.min( ob.max, x ) );
  if( x != this.value.replace( r, '$1' ) ) {
   e.returnValue=false;
   ob.firstChild.style.left = Math.round( ( x - ob.min ) * ob.offsetWidth / ( ob.max - ob.min )
    - ob.firstChild.offsetWidth / 2 - ( +ob.style.border.replace( /\D/g, '' ) ) ) + p;
   x = ob.before + x + ob.after;
   this.value = x;
   ob.lastChild.nodeValue = x;
   ob.title = x; if(ob.func) { ob.func(e); }
 } } }
 function m(e) { if( ob ) {
  e = e || window.event || {};
  var x = typeof e.clientX==='number' ? e.clientX : e.x;
  x = Math.max( 0, Math.min( ob.offsetWidth, x - ob.offsetLeft ) );
  ob.firstChild.style.left = Math.round( x
   - ob.firstChild.offsetWidth / 2 - ( +ob.style.border.replace( /\D/g, '' ) ) ) + p;
  x = ob.before + Math.round( ( x / ob.offsetWidth * ( ob.max - ob.min ) + ob.min ) / ob.step  ) * ob.step + ob.after;
  ob.el.value = x;
  ob.lastChild.nodeValue = x;
  ob.title = x; if(ob.func) { ob.func(e); }
 } }
 function n(e) {
  d.onselectstart = function() { return false; };
  d.onmousemove = m;
  ob = this;
  ob.el.focus(); m(e);
 }
 document.onmouseup = function(e) {
  d.onselectstart = null;
  d.onmousemove = null;
  ob = null;
 };

 if( min > max ) { q = min; max = min; min = q; }
 q = +Sborder.replace( /\D/g, '' );

 s.className = name;
 s.background = Scolor;
 s.border = Sborder;
 s.position = 'absolute';
 s.font = font;
 s.color = Fcolor;
 s.textAlign = 'center';
 s.cursor = 'default';
 s = c.style;
 s.background = Pcolor;
 s.border = Pborder;
 s.position = 'absolute';
 s.width = '4px';
 b.appendChild( c );
 b.appendChild( d.createTextNode( after ) );

 while(i--) { if( a[i].type==='text' && r.test( a[i].className ) ) {
  j = a[i];
  h = l( j );
  c = b.cloneNode( true );
  c.el = j; j.el = c;
  c.step = +( j.className + ' step' + step ).match( /step(\d*)/ )[1];
  c.min = +( j.className + ' min' + min ).match( /min([\d-]*)/ )[1];
  c.max = +( j.className + ' max' + max).match( /max([\d-]*)/ )[1];
  c.func = func;
  c.before = eval( '"' + ( j.className + ' before' + before).match( /before(\S*)/ )[1].replace( /uu(\w{4})/g, '\\u$1') + '"' );
  c.after = eval( '"' + ( j.className + ' after' + after).match( /after(\S*)/ )[1].replace( /uu(\w{4})/g, '\\u$1') + '"' );
  c.after = c.after;
  v = parseInt( j.value ) || ( max + min ) / 2;
  v = Math.max( c.min, Math.min( c.max, Math.round( v / step ) * step ) );
  s = c.style;
  s.left = h.x + p;
  s.top = h.y + p;
  s.width = h.w - 2 * q + p;
  s.height = h.h - 2 * q + p;
  s.lineHeight = h.h - 2 * q + p;
  c.firstChild.style.left =
   Math.round( ( v - c.min ) / ( c.max - c.min ) * h.w - q ) + p;
  c.firstChild.style.top = - (+Pborder.replace( /\D/g, '' )) - q + p;
  c.firstChild.style.height = h.h + p;
  c.lastChild.nodeValue = c.before + v + c.after;
  c.onmousedown = n;
  j.parentNode.insertBefore( c, j );
  j.onfocus = f;
  j.onblur = g;
  j.onkeydown = k;
  j.style.position = 'relative';
  j.style.left = '-999px';
 } }
}