<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Slider Widget Demo</title>
<script type="text/javascript">
var djConfig = {
isDebug: true,
debugAtAllCosts: false,
parseWidgets: true
};
</script>
<script type="text/javascript" src="../../dojo.js"></script>
<script type="text/javascript">
dojo.require ("dojo.widget.*");
dojo.require ("dojo.widget.Slider");
</script>
</head>
<body bgcolor="#C0C0C0">
<h1>Slider Widget Demo</h1>
This page demos the three types of slider widgets, with slightly different behaviours.
<table border="1">
<thead><tr><td>Type</td><td>Range</td><td>onDragMove</td><td>onDragEnd</td><td>onClick</td><td>reversed</td></tr></thead>
<tbody>
<tr><td>vertical</td><td>1..9</td><td> </td><td>update text field</td><td>update text field</td><td>yes</td></tr>
<tr><td>horizontal</td><td>-10..10</td><td>update text field</td><td> </td><td>update text field</td><td>no</td></tr>
<tr><td>box</td><td>0..10</td><td> </td><td>update text field</td><td> </td><td>X:yes<br>Y:no</td></tr>
</tbody>
</table>
Red, blue, and green borders shown to test the correct placement of slider components.<br>
<table>
<tr><td></td><td style="border:2px solid green;line-height:0px;white-space:nowrap;">
[before]<div id="horizontalSlider" dojoType="SliderHorizontal"
initialValue="5" minimum="-10" maximum="10" snapValues="11"
activeDrag="true"
onValueChanged="dojo.byId('horizontalSliderValue').value = arguments[0];"
buttonStyle="top:1px;"
backgroundStyle="padding:8px 4px 8px 4px;border:1px solid red;"
backgroundSize="width:100px;height:5px;"
backgroundSrc="src/widget/templates/images/blank.gif"
progressBackgroundSrc="src/widget/templates/images/slider-bg.gif"
handleStyle="top:0px;width:13px;height:18px;"
handleSrc="src/widget/templates/images/slider.gif"
style="border:solid blue;border-width:16px 12px 8px 4px;padding:4px 8px 12px 16px;margin:9px;"
></div>[after]</td>
<td rowspan="2" style="border:2px solid green;line-height:0px;white-space:nowrap;vertical-align:middle;">
[before]<div id="boxSlider" dojoType="Slider" maximumX="10" maximumY="10" minimumX="0" minimumY="0" initialValueX="5" initialValueY="5"
clickSelect="false"
showButtons="false"
backgroundStyle="padding:2px 4px 8px 16px;border:1px solid red;"
backgroundSize="width:200px;height:200px;"
handleStyle="top:-1px;"
onValueChanged="dojo.byId('boxX').value = arguments[0]; dojo.byId('boxY').value = arguments[1];"
flipX="true"
></div>[after]</td>
</tr>
<tr><td style="border:2px solid green;line-height:0px;white-space:nowrap;">
[before]<div id="verticalSlider" dojoType="SliderVertical"
initialValue="5" snapValues="9" maximum="9" minimum="1"
clickSelect="true"
onValueChanged="dojo.byId('verticalSliderValue').value = arguments[0];"
buttonStyle="width:28px;height:16px;"
backgroundStyle="padding:8px 8px 8px 8px;border:1px solid red;background-color:yellow;"
progressBackgroundSrc="src/widget/templates/images/slider-bg-progress-vert.gif"
handleStyle="left:2px;top:-1px;"
handleSrc="src/widget/templates/images/slider-button-vert.png"
flip="true"
></div>[after]</td></tr>
</table>
<p>
Horizontal Slider Value:
<input
id="horizontalSliderValue" name="horizontalSliderValue" value="0"/>
<button onclick="dojo.widget.byId ('horizontalSlider').setValue (dojo.byId('horizontalSliderValue').value)">set</button> <i>(updates when slider handle is moved)</i><br />
Vertical Slider Value:
<input id="verticalSliderValue" name="verticalSliderValue" value="0"/>
<button onclick="dojo.widget.byId ('verticalSlider').setValue (dojo.byId('verticalSliderValue').value)">set</button> <i>(updates when slider handle drag ends)</i><br />
Box Slider Value:
<input id="boxX" name="boxX" value="0"/>
<input id="boxY" name="boxY" value="0"/>
</p>
<p><u>Debug Messages</u></p>
</body>
</html>