File: //usr/share/doc/libjs-scriptaculous/test/functional/slider_test.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Text effects tests</title>
<script type="text/javascript" src="../../lib/prototype.js"></script>
<script type="text/javascript" src="../../src/scriptaculous.js"></script>
</head>
<body>
<h1>Sliders</h1>
<h2>Standard horizontal slider</h2>
<div id="track1" style="width:200px;background-color:#aaa;height:5px;">
<div id="handle1" style="width:5px;height:10px;background-color:#f00;"> </div>
</div>
<p id="debug1"> </p>
<h2>Vertical slider</h2>
<div id="track2" style="height:100px;background-color:#aaa;width:5px;">
<div id="handle2" style="width:10px;height:5px;background-color:#f00;"> </div>
</div>
<p id="debug2"> </p>
<h2>Slider with predefined values [2,4,6,8] and a non-default range [2,15]</h2>
<div id="track3" style="width:200px;background-color:#aaa;height:5px;">
<div id="handle3" style="width:5px;height:10px;background-color:#f00;"> </div>
</div>
<p id="debug3"> </p>
<h2>Slider with multiple handles</h2>
<div id="track4" style="width:200px;background-color:#aaa;height:5px;position:relative;">
<div id="handle4-1" style="position:absolute;top:0;left:0;width:5px;height:10px;background-color:#f00;"> </div>
<div id="handle4-2" style="position:absolute;top:0;left:0;width:5px;height:10px;background-color:#0f0;"> </div>
<div id="handle4-3" style="position:absolute;top:0;left:0;width:5px;height:10px;background-color:#00f;"> </div>
</div>
<p id="debug4"> </p>
<h2>Slider with multiple handles and predefined values</h2>
<div id="track5" style="width:200px;background-color:#aaa;height:5px;position:relative;">
<div id="handle5-1" style="opacity:0.5;position:absolute;top:0;left:0;width:5px;height:10px;background-color:#f00;"> </div>
<div id="handle5-2" style="opacity:0.5;position:absolute;top:0;left:0;width:5px;height:10px;background-color:#0f0;"> </div>
<div id="handle5-3" style="opacity:0.5;position:absolute;top:0;left:0;width:5px;height:10px;background-color:#00f;"> </div>
</div>
<p id="debug5"> </p>
<h2>Slider with multiple handles, external controls, handles are restricted (can't be moved prior/after adjacent handles)</h2>
<div id="track6" style="width:200px;background-color:#aaa;height:5px;position:relative;">
<div id="handle6-1" style="position:absolute;top:0;left:0;width:5px;height:10px;background-color:#f00;"> </div>
<div id="handle6-2" style="position:absolute;top:0;left:0;width:5px;height:10px;background-color:#0f0;"> </div>
</div>
<br/><br/>
<a href="#" onclick="slider6.setValueBy(-0.1);return false;"><--</a>
<a href="#" onclick="slider6.setValueBy(0.1);return false;">--></a>
<p id="debug6"> </p>
<h2>Fun with spans</h2>
<style>
#track7 div.handle {
background-color:#aaa;
color:#444;
top:0;
left:0;
position:absolute;
z-index:2;
height:100px;
font-size:20px;
}
#track7 div.handle.selected {
background-color:#444;
color:#fff;
}
</style>
<div id="track7" style="width:300px;background-color:#cbf;height:50px;position:relative;z-index:0;">
<div id="handle7-1" class="handle">1</div>
<div id="handle7-2" class="handle">2</div>
<div id="handle7-3" class="handle">3</div>
<div id="span7-1" style="top:0;left:0;position:absolute;background-color:#000;height:50px;z-index:1;"> </div>
<div id="span7-2" style="top:0;left:0;position:absolute;background-color:#444;height:50px;z-index:1;"> </div>
<div id="span7-start" style="top:0;left:0;position:absolute;background-color:#f00;height:50px;z-index:1;"> </div>
<div id="span7-end" style="top:0;left:0;position:absolute;background-color:#00f;height:50px;z-index:1;"> </div>
</div>
<br/><br/><br/><br/>
<h2>Slider with span and [1,10] range (test for #3731)</h2>
<div id="zoom-track" style="width:300px;background-color:#aaa;height:20px;position:relative;z-index:0;">
<div id="zoom-handle-1" style="position:absolute;background-color:#f00;height:20px;z-index:2">!</div>
<div id="zoom-handle-2" style="position:absolute;background-color:#0f0;height:20px;z-index:2">!</div>
<div id="zoom-track-selected" style="position:absolute;background-color:#00f;height:20px;z-index:1"> </div>
</div>
<!-- FIXME: add more demos here -->
<script type="text/javascript">
// <![CDATA[
new Control.Slider('handle1','track1',{
sliderValue:0.5,
onSlide:function(v){$('debug1').innerHTML='slide: '+v},
onChange:function(v){$('debug1').innerHTML='changed! '+v}});
new Control.Slider('handle2','track2',{axis:'vertical',
onSlide:function(v){$('debug2').innerHTML='slide: '+v},
onChange:function(v){$('debug2').innerHTML='changed! '+v}});
new Control.Slider('handle3','track3',{values:[2,4,6,8],range:$R(2,15),
onSlide:function(v){$('debug3').innerHTML='slide: '+v},
onChange:function(v){$('debug3').innerHTML='changed! '+v}});
new Control.Slider(['handle4-1','handle4-2','handle4-3'],'track4',{
onSlide:function(v){$('debug4').innerHTML='slide: '+v.inspect()},
onChange:function(v){$('debug4').innerHTML='changed! '+v.inspect()}});
new Control.Slider(['handle5-1','handle5-2','handle5-3'],'track5',{values:[0,0.2,0.4,0.6,0.8],
onSlide:function(v){$('debug5').innerHTML='slide: '+v.inspect()},
onChange:function(v){$('debug5').innerHTML='changed! '+v.inspect()}});
var slider6 = new Control.Slider(['handle6-1','handle6-2'],'track6',{
sliderValue:[0.3, 0.8],
restricted:true,
onSlide:function(v){$('debug6').innerHTML='slide: '+v.inspect()},
onChange:function(v){$('debug6').innerHTML='changed! '+v.inspect()}});
new Control.Slider(['handle7-1','handle7-2','handle7-3'], 'track7',
{ spans:['span7-1','span7-2'],
startSpan:'span7-start',
endSpan:'span7-end',
range:$R(0,300) });
new Control.Slider(
['zoom-handle-1','zoom-handle-2'],'zoom-track',{
sliderValue:[1,10], range:$R(1,10),
values:[1,2,3,4,5,6,7,8,9,10],
restricted:true,
spans:['zoom-track-selected'] });
// ]]>
</script>
</body>
</html>