Get CBE at Cross-Browser.com
<html>
<head>
<style type='text/css'><!--
.clsCBE {
position:absolute; visibility:hidden;
width:100%; height:100%; clip:rect(0,100%,100%,0);
color:#000000; margin:0px; padding:0px;
border:1px solid #000000;
}
--></style>
<script type='text/javascript' src='../cbe_core.js'></script>
<script type='text/javascript' src='../cbe_event.js'></script>
<script type='text/javascript'><!--
function windowOnload() {
with (cbeGetElementById('slider').cbe) {
background('#0000ff');
resizeTo(24,400);
moveTo('center');
show();
}
with (cbeGetElementById('thumb').cbe) {
background('#cccccc');
resizeTo(20,20);
moveTo(1,1);
show();
addEventListener('drag', sliderDragListener, false);
}
}
function sliderDragListener(e) {
var thumb = e.cbeTarget;
var newY = thumb.top() + e.dy;
if (newY >= 1 && newY < thumb.parentNode.height() - thumb.height() - 3) {
thumb.moveBy(0, e.dy);
}
}
//--></script>
</head>
<body>
<h1>CBE Slider Example</h1>
<div id='slider' class='clsCBE'>
<div id='thumb' class='clsCBE'></div>
</div>
</body>
</html>