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.
Please indicate your preferences in percentages using the controls below:
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:
slide
function;<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;<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>
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' );