4umi.com/web/javascript/slider

Slider

Form Javascript

Whenever some sort of scalar input is expected, it makes sense to deploy a slider. It is commonly used in software and desktop applications, but rarely on the internet because web browsers don't come natively with such a control. From an ordinary text <input> element, to be used by those with javascript turned off, this script reads name, value, size and position, then creates a <div> element to place on top of it. So the lay-out of the page remains the same for those with and without script.

The slider can be operated by clicking and dragging with the mouse, or by using Tab and the four arrow keys when a sliding element has focus. and are translated into and respectively. The graphical position indicator is highlighted in a colour of your choice to replace the blinking cursor.

An example form

Please indicate your preferences in percentages using the controls below:

Your input




The HTML

The above form is created by calling the slide() function twice, once for the elements with classname slider and once for those classed heavy, immediately after the necessary code has been read, which is just before the onload event.

The first <input> has been given a different width and height to demonstrate how the script adepts the size of the slider to cover the element. The other elements look remarkably like the last <form> element, which has no class and is what the Javascript-less users have to deal with. Other properties, such as colours, can be set in three ways, or a combination:

  1. as parameter when calling the slide function;
  2. as classnames in the class attribute of the <input> element—spaces and special characters which are illegal in attribute values can be entered as unicode, replacing the \ with another u as shown in the examples;
  3. in a stylesheet.
<form action="">
  <fieldset>
    <legend>Your input</legend>
    <label for="s1">Slider 1:
      <input type="text" id="s1" name="s1" value=" 30%" size="50" class="slider" style="height:9px;"/>
    </label>
    <br/>
    <label for="s2">Slider 2:
      <input type="text" id="s2" name="s2" value=" 30%" size="30" class="slider"/>
    </label>
    <br/>
    <label for="s3">Slider 3:
      <input type="text" id="s3" name="s3" value=" All 90%" size="30" class="slider step5 beforeAlluu00a0"/>
    </label>
    <br/>
    <label for="s4">Slider 4:
      <input type="text" id="s4" name="s4" value=" 90%" size="30" class="heavy"/>
    </label>
    <br/>
    <label for="s5">Slider 5:
      <input type="text" id="s5" name="s5" value=" -10\u02da" size="30" class="heavy min-20 max100 afteruu02da"/>
    </label>
    <br/>
    <label for="s6">Slider 6:
      <input type="text" id="s6" name="s6" value=" 30%" size="30"/>
    </label>
  </fieldset>
</form>

      All valid, naturally.
 

The script

The necessary HTML to include the 5KB library file (view) with the actual code is straightforward:

<script src="slider.js" type="text/javascript"></script>

The function comes with a number of parameters, all of which are optional and can be skipped by supplying a variable of another type, such as the null object as shown on the last line. The default values can be found on lines 3-16. If an empty string is supplied as the classname (the first parameter), then all <input type="text"> elements are converted.

The function attaches an onmouseup event listener to the document, because in order to allow dragging the mouse out of a slider. Other events are watched for the sliding element only, but functions triggered by happenings add and subsequently remove other document-wide event listeners.

function ali(e) { var o = e.target || e.srcElement, s; if( s = o.value || o.el && o.el.value ) { window.status = s; } }
slide();
slide( 'heavy', null, null, null, ali, null, null, null, null, '#ff8066', '2px solid black', 'gold', '3px double blue', '#ffff99' );