<public:component tagname="slider">
<public:property name="movelr" />
<public:property name="moveud" />
<public:property name="backgroundColor" />
<public:property name="backgroundImage" />
<public:property name="backgroundRepeat" />
<public:property name="thumbColor" />
<public:property name="thumbSize" />
<public:property name="value" id="propValue" put="setValue" get="getValue" />
<public:attach event="oncontentready" onevent="initialize()" />
<public:defaults viewLinkContent />
<public:event name="onslide" id="eSlide" />

<body>
	<div id="theParent" style="background-color: scrollbar;position: relative; width: 100%; height: 100%;">
		<div id="theDiv" style="border: outset 2px;background-color: scrollbar; cursor: hand;position: absolute; top: 10px; left: 0px;width: 15px; height: 40px;z-index: 5; font-size: 1px"></div>
		<div id="theMiddle" style="font-size:0px; background-color: ;position: absolute;"></div>
	</div>
	
<script>
var dragElement, dragParent, realValue;

function initialize() {
  var parentHeight, parentWidth;
  dragElement = theDiv;
  dragParent = theParent;
  
  parentHeight = dragParent.style.pixelHeight;
  parentWidth = dragParent.style.pixelWidth;
  parentHeight = 26;
  parentWidth  = 100;
  if (element.movelr) {
    // left to right movement
	if (element.thumbSize) {
	  theDiv.style.width = element.thumbSize;
	} else {
	  theDiv.style.posWidth = Math.round(parentWidth / 20);
	}
	
	theDiv.style.posHeight = Math.round(parentHeight * .9);
	theDiv.style.posTop = Math.round(parentHeight * .05);
	theDiv.style.posLeft = 0;
	theMiddle.style.width = "98%";
	theMiddle.style.height = "2%";
	theMiddle.style.top = "49%";
	theMiddle.style.left = "1%";
  }

  if (element.backgroundImage) {
    theParent.style.backgroundImage = element.backgroundImage; 
  }
  
  if (element.backgroundColor) {
    theParent.style.backgroundColor = element.backgroundColor;
  }
  
  if (element.backgroundRepeat) {
    theParent.style.backgroundRepeat = element.backgroundRepeat;
  }
  
  if (element.thumbColor) {
    theDiv.style.backgroundColor = element.thumbColor;
  }
  
  dragElement.attachEvent("onmousedown", startDrag);
}

function startDrag(e) {
  dragElement.setCapture();
  mx = e.clientX;
  my = e.clientY;
  dragElement.attachEvent("onmousemove", doDrag);
  dragElement.attachEvent("onmouseup", endDrag);
}

function doDrag(e) {
  var dragPosition;
  var event;

  dx = e.clientX - mx;
  dy = e.clientY - my;

  if (element.movelr) {
    dragElement.style.posLeft += dx;
  } 

  noResetX = false;
  noResetY = false;
 
  if (dragElement.style.posLeft + dragElement.style.posWidth > dragParent.style.pixelWidth) {
      dragElement.style.posLeft = dragParent.style.pixelWidth - dragElement.style.posWidth - 1;
	  noResetX = true;
  }
  
  if (dragElement.style.posLeft < 0) {
      dragElement.style.posLeft = 0;
	  noResetX = true;
  }

  if (element.movelr) {
    dragPosition = Math.round((dragElement.style.posLeft / (dragParent.style.pixelWidth - dragElement.style.posWidth - 1)) * 100);
  }
  
  if (!noResetX) 
    mx = e.clientX;

  if (!noResetX && !noResetY) {
   event = createEventObject();
   event.sliderValue = dragPosition;
   realValue = dragPosition;
   eSlide.fire(event);
  }
}

function setValue(newValue) {
  if ((newValue < 0) || (newValue > 100)) {
    return;
  }
  
  if (element.movelr) {
    ppV = dragParent.style.pixelWidth / 100;  
    dragElement.style.posLeft = ppV * newValue;
  }

  realValue = newValue;
  propValue.fireChange();
}

function getValue() {
  return realValue;
}

function endDrag() {
  dragElement.detachEvent("onmousemove", doDrag);
  dragElement.detachEvent("onmouseup", endDrag);
  dragElement.releaseCapture(); 
}
</script>
</body>