Skip to content


Subversion checkout URL

You can clone with
Download ZIP
Fetching contributors…
Cannot retrieve contributors at this time
170 lines (146 sloc) 4.06 KB
<h3 class="h3_test">100 steps, snap off</h3>
<p>When you drag the black box horizontally the number below should change to reflect the position. The step indicator should reflect the initialPosition option of 50.</p>
<a href="#" id="attach1" >Attach</a>
<a href="#" id="detach1">Detach</a>
<div id="area">
<div id="knob"></div>
<p id="upd">XX</p>
<h3 class="h3_test">10 steps, snap on</h3>
<p>When you drag the black box horizontally the number below should change to reflect the position in 10 steps that "snap".</p>
<div id="area2">
<div id="knob2"></div>
<p id="upd2">XX</p>
<h3 class="h3_test">setRange</h3>
<p>When you click the setRange button the slider should continue to work properly with a range of 200-50.</p>
<div id="area3">
<div id="knob3"></div>
<button id="setRange">setRange</button>
<p id="upd3">XX</p>
<h3 class="h3_test">A range of -20 to 20 whith a initial value of 0</h3>
<p>The knob should be in the middle of the slider</p>
<div id="area4">
<div id="knob4"></div>
<p id="upd4">XX</p>
<h3 class="h3_test">Monitor events</h3>
<p>When the slider is initalized it should fire each event only once (change, tick and complete). </p>
<div id="area5">
<div id="knob5"></div>
<br />
<p>change events fired:<span id="upd5-change"></span><p>
<p>tick events fired:<span id="upd5-tick"></span></p>
<p>complete events fired:<span id="upd5-complete"></span></p>
<h3 class="h3_test">resizable slider</h3>
<p>Slider should resize with window and knob should maintain correct step on resize. Knob should also be able to travel full length of slider.</p>
<div id="area6">
<div id="knob6"></div>
<p id="upd6">XX</p>
<h3 class="h3_test">This slider should work with your mousewheel</h3>
<p>The knob should move when scrolling the mousewheel</p>
<div id="area7">
<div id="knob7"></div>
<h3 class="h3_test">Knob positioned absolute</h3>
<p>The knob's position should not be set to position relative if it is currently absolute.</p>
<div id="area8">
<div id="knob8"></div>
<style type="text/css" media="screen">
#area, #area2, #area3, #area4, #area5, #area6, #area7, #area8 {
background: #ccc;
height: 20px;
width: 200px;
position: relative;
#area6 {
width: 100%;
#knob, #knob2, #knob3, #knob4, #knob5, #knob6, #knob7, #knob8 {
height: 20px;
width: 20px;
background: #000;
cursor:col-resize !important;
#knob8 {
position: absolute;
<script src="/depender/build?require=More/Slider"></script>
var mySlide = new Slider($('area'), $('knob'), {
initialStep: 50,
onChange: function(pos){
$('upd').set('html', pos);
$('attach1').addEvent('click', function(event){
$('detach1').addEvent('click', function(event){
var mySlide2 = new Slider($('area2'), $('knob2'), {
steps: 10,
snap: true,
initialStep: 5,
onChange: function(pos){
$('upd2').set('html', pos);
var mySlide3 = new Slider($('area3'), $('knob3'), {
steps: 100,
range: [0,100],
onChange: function(pos){
$('upd3').set('html', pos);
var mySlide4 = new Slider($('area4'), $('knob4'), {
range: [-20, 20],
initialStep: 0,
onChange: function(pos){
$('upd4').set('html', pos);
var change = 0, tick = 0, complete = 0;
var mySlide5 = new Slider($('area5'), $('knob5'), {
onChange: function(step){
$('upd5-change').set('text', change);
onTick: function(position){
$('upd5-tick').set('text', tick);
if (this.options.snap) position = this.toPosition(this.step);
this.knob.setStyle(, position);
onComplete: function(step){
$('upd5-complete').set('text', complete);
var mySlideStretch = new Slider($('area6'), $('knob6'), {
onChange: function(position){
$('upd6').set('html', position);
window.addEvent('resize', function(){
new Slider('area7', 'knob7', {
wheel: true
new Slider('area8', 'knob8');
Jump to Line
Something went wrong with that request. Please try again.