Windows’ own slider

Form JScript

Slider controls—also known as trackbars—are not native to any browser, therefore they have not yet made their way to the Internet entirely as other forms of man-machine communication have. This is a big pity since they are more down to earth articles than many other hard and soft computer devices. One approach for implementing a slider is to dive into clientside scripting languages and build a huge object and function library that will continously monitor the mouse or keyboard, move images or absolutely positioned <div> tags around the screen and modify hidden forms. See our Slide project for one modest example. Another approach relies on the mother program.

A slider object

Consider this piece of HTML, obviously geared towards Windows and Internet Explorer users, reportedly specifically those who have the system file MSCOMCTL.OCX installed:

<object id="aslider" width="200" height="40" title=" Slide me. "
 <param name="BorderStyle" value="1" />
 <param name="Min" value="-10" />
 <param name="Max" value="10" />
 <param name="Value" value="7" />
  Sorry, this slider could not be loaded.

The classid attribute on line 2 refers to a core system control, which allows a pointer icon to be dragged along a bar and responds when the user acts on the four arrow keys or the mousewheel, even when the Javascript on a page has died a syntax error, which renders like this:

Sorry, this slider could not be loaded.   It has been produced inline with this text, for no good reason. A more common scenario would have such element appear in a bordered form area with a legend and possibly a label, but certainly a matching, equally non-distinct colour scheme. They cannot be customized through paramaters or script.

Reading the value

The object has a number of interesting characteritics. Its very raison d' être, the value that the position indicator is pointing at, is naturally always a number. It is available to Javascript directly through its name:

Alert aslider, which is nothing more than this candid bit of HTML:

<b>Alert <a href="#" onclick="alert( aslider );return false;">aslider</a></b>

It might as well have been a button. A constantly updating text control alongside on the page is perhaps the most appreciated from the user end.


This variable which is the id attribute of the object on the page is read/write to keep things rather simple, so the statement aslider = newvalue; would update the value and reposition the indicator all by itself. Out of range values are automatically capped at the appropriate end limit. Try it out: set it to minus ten, substract 3 or double the value.

aslider = -10;/**/
aslider = 0;/**/
aslider -= 3;/**/
aslider += 4;/**/
aslider *= 2;/**/
if( p = +window.prompt( 'Please enter a new slider value:', aslider ) ) aslider = p;/**/

Again, the required code is quite uncomplicated and transparant, once you catch on with the rhythm of it.

Setting parameters

Many properties are read/write. Click any lines in any order to execute the statements, and keep an eye on the displayed ‘ticks’ in the slider object as shown (if it has scrolled out of view, click the intermediate section headers to collapse the sections):

aslider.Min = -10;/**/
aslider.Min = 0;/**/
aslider.Max = 0;/**/
aslider.Max = 10;/**/
aslider.Max = 20;/**/
alert( 'Minimum:\t' + aslider.Min + '\nMaximum:\t' + aslider.Max );/**/
aslider.TickStyle = 0;/**/
aslider.TickStyle = 1;/**/
aslider.TickStyle = 2;/**/
aslider.TickFrequency = 1;/**/
aslider.TickFrequency = 5;/**/
aslider.TickFrequency = 10;/**/

Be sure to also check out the other properties. The report is assembled lightning-fast:

function getproperties( o ) {
 var a = [ 'Properties of object "' + ( o.id || o.toString() ) + '":' ],
  b = confirm( 'There may be some properties with no value set. List them anyway?' ),
  c, i, j = 0;
 for( i in o ) {
  if( ( c = o[i] ) || b ) { a[++j] = j + ' ' + i + '\t' + c; }
 return a.join( '\n' );


Parameters that can be passed as <param> elements in the HTML source code are:

<param name="_ExtentX" value="3704" />
<param name="_ExtentY" value="423" />
<param name="_Version" value="393216" />
<param name="BorderStyle" value="0" />
<param name="MousePointer" value="0" />
<param name="Enabled" value="1" />
<param name="OLEDropMode" value="0" />
<param name="Orientation" value="0" />
<param name="LargeChange" value="5" />
<param name="SmallChange" value="1" />
<param name="Min" value="-400" />
<param name="Max" value="0" />
<param name="SelectRange" value="0" />
<param name="SelStart" value="-200" />
<param name="SelLength" value="0" />
<param name="TickStyle" value="0" />
<param name="TickFrequency" value="20" />
<param name="Value" value="-200" />
<param name="TextPosition" value="0">

The example values are not all set to their default.

Keep in mind not everyone is gifted with these objects, classid's and repertoire. But then: enjoy.