# CBE Slider Example

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>