Place the following functions inside of a <SCRIPT> block in the <HEAD> section of your HTML document.


// Call the 'sliderInit' function from the <BODY> onload event handler.
// It initializes all <DIV> objects whose width or height is 17.
// This is necessary!
function sliderInit() {
var MSIE=true; if (window.getComputedStyle) {MSIE=false;}
var s=document.getElementsByTagName("div");
for (var i=0;i<s.length;++i)
 {if (s.item(i).style.width=="17px") {s.item(i).scrollTop=0; if (MSIE){s.item(i).style.display="inline";}}
  if (s.item(i).style.height=="17px" && MSIE) {s.item(i).style.display="inline"; }
 }
}


// Use the 'sliderH' function with horizontal sliders.
// The 'sliderH' function returns a floating-point number between 0 and 1.

function sliderH(divObj) {
var divObj;
return parseInt(divObj.scrollLeft)/
      (parseInt(divObj.scrollWidth)-parseInt(divObj.style.width));
}


// Use the 'sliderV' function with vertical sliders.
// The 'sliderV' function returns a floating-point number between 0 and 1.

function sliderV(divObj) {
var divObj;
return parseInt(divObj.scrollTop)/
      (parseInt(divObj.scrollHeight)-parseInt(divObj.style.height));
}

Place the following inside the <BODY> tag:


<body onload="sliderInit();">

You can place one or more horizontal sliders in the <BODY> section:


<div id=sliderH1
 style="width:110px; height:17px; overflow-y:hidden; overflow-x:scroll; font-family:arial; font-size:100px; display:inline-block;"
 onscroll="window.status=sliderH(sliderH1).toString();">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</div>

Notes:
1. Each <div> object should have its own unique ID (for example: id=sliderH1, id=sliderH2, ...).
2. The width:110px; can be changed to any desired width.
3. The non-breakable spaces (   ) are used to force the scroll bars to appear. You may have
    to experiment with the number of spaces if sliders of different widths are used.
4. The optional onscroll event handler is invoked whenever the user changes the scroll position. It can
    be used to reference any function you choose. If you choose to use the onscroll event handler,
    you can use the this object reference in your function call. You might need to specify the DIV element's
    margin and/or vertical-align properties for proper alignment.

You can place one or more vertical sliders in the <BODY> section:


<div id=sliderV1
 style="width:17px; height:110px; overflow-x:hidden; overflow-y:scroll;
 font-family:arial; font-size:100px; display:inline-block;"
 onscroll="window.status=sliderV(sliderV1).toString();">
<br><br><br><br>&nbsp;
</div>

Notes:
1. Each <div> object should have its own unique ID (for example: id=sliderV1, id=sliderV2, ...).
2. The height:110px; can be changed to any desired height.
3. The line-breaks ( <br> ) are used to force the scroll bars to appear. You may have to experiment
    with the number of line-breaks if sliders of different heights are used.
4. The optional onscroll event handler is invoked whenever the user changes the scroll position. It can
    be used to reference any function you choose. If you choose to use the onscroll event handler,
    you can use the this object reference in your function call. You might need to specify the DIV element's
    margin and/or vertical-align properties for proper alignment.

sliderH1	sliderH2	TEXT
sliderV1	sliderV2