Listed on

Range Inputs and Events

The range input looked perfect for writing a web interface to control volume levels on a batch of play out boxes. However, the initial choice of the onChange Javascript event turned out to be both naive and unworkable when tested on an iPad under Mobile Safari although it appeared to work well enough for a mouse driven interface. The better solution was to use two events: onMouseUp and onTouchEnd.
The problem with onChange is that it is allowed to trigger instantly on a change so in a mouse driven interface you can click on the value you want on the slider and it changes to the new value. On a touch driven interface (Mobile Safari in this case) it can report the first change it encounters - typically exactly 1 value different from its previous value.

Using onMouseUp and onTouchEnd allows the slider to be moved and the event is only triggered at the end of the action on both mouse driven and touch interfaces.

My test harness:

<html>
<body>
<?
   $event = "onMouseUp=\"submit();\" onTouchEnd=\"submit();\"";
?>
<form>
<input type=range name=v value="<? print $_REQUEST[v] ?>" <? print $event ?> />
</form>
<? print $_REQUEST[v] ?>
</body>
</html>