[IPOL discuss] slider inputs for IPOL demos

[Pascal Getreuer]

For some IPOL demos, it would be convenient to use slider inputs for
real-valued parameters.  By a slider input, I mean the kind of widget
like a volume meter or a scroll bar.  For example, a denoising demo
might ask for the amount of noise to add using a slider input.  I
propose here a simple implementation of sliders using JavaScript.
Please try the demo on my webpage:
http://www.math.ucla.edu/~getreuer/slider.html


== Problems ==

A disadvantage about sliders is that they are imprecise---it is hard
for a user to select the value 4.00 exactly and not 3.98 or 4.07.
This problem is solved by linking the slider to an editable text box.
Then the user benefits from the convenience of the slider bar and has
the text box in case precise entry is needed.

On the web, sliders also have a technological problem.  While most
standard widgets are supported by HTML4, sliders are not.  HTML5 will
add support for sliders, but until then, sliders require JavaScript.
I have looked at several implementations, and the essence of it is
   1. Create a DIV or an IMG that will function as the draggable
slider thumb, set its CSS position property to "relative," and set
onmousedown to a JavaScript function that will initiate dragging.
   2. In the onmousedown function, set document.onmousemove and
document.onmouseup to functions that will handle the dragging.
   3. In these handler functions, get the mouse coordinates from
(event.screenX,event.screenY) and change the CSS left property of the
slider thumb to move it around.

Although this should be simple, most implementations on the web are
pretty complicated.  Some sliders implementations have significant
amounts of interface code for stylizing the sliders.  Some sliders are
implemented as one part of a larger UI framework (mountains of code).
Many good sliders have restrictive licenses.  There are also free
sliders, but naturally these are not as thoroughly tested for browser
compatibility.


== A Solution ==

Ideally a slider for IPOL demos should satisfy (in order of highest to
lowest priority)
   1. work in as many browsers as possible, and degrade gracefully
where not supported
   2. have a free license
   3. have a simple implementation
   4. enable the slider to link with an edit text box
   5. be attractive and efficient

I have developed a 200-line implementation that, to the best of my
abilities, satisfies these goals:

   http://www.math.ucla.edu/~getreuer/slider.html

It works successfully in the browsers that I have available: IE8,
Firefox 3.6, Chrome 8 and 9, Safari 5 (Windows version), and Opera 11.
 It degrades gracefully if JavaScript is disabled.  In that case only
the text box is shown (for example, this works correctly in Firefox
with the NoScript plugin and in the Lynx browser, which has no
JavaScript support).  Visually it is not especially attractive but
reasonable.

A limitation is that, unlike a standard slider, you cannot move the
slider by clicking in the open areas of bar.  Only the slider's thumb
is interactive.  Another limitation is that the slider does not
respond to the mouse scroll wheel or to the keyboard.  These features
are possible (there exist sliders like this on the web), but they come
at the cost of more JavaScript code, which it seems would increase the
chances of browser compatibility issues.

I am not a web expert, I know little about which JavaScript features
have browser compatibility issues.  I welcome any feedback or
suggestions.

I am aware that IPOL generally avoids JavaScript, but I see some small
amounts of JavaScript are in already use.  For example, the IkiWiki
"!toggle" link for expanding a section of hidden text uses JavaScript.
 I think the key requirement is that the site is still usable without
JavaScript.

What are your thoughts about using this slider in IPOL demos?


Pascal Getreuer