Two new samples using this slidebar added!

The other day I wanted to include a slidebar in a Chrome sample (for zooming) but I realised that I didn't wan't to use the ActiveX control included since IE3. I had made a slidebar sample about a year ago but it got lost in a HD crash a few months ago so I was back to scratch.

Well actually I wasn't because I had done a generic move script so I just needed to check if the slider handle was within it's containers boundaries.

Catching the OnMouseDown Event

The catching of the onmousedown event is identical to the one in the generic move but since I haven't explained it before I'll do it here. When the mouse is down I check for a className and if it satisfy my condition I get the offset from the elements left/top using:

tx = (window.event.clientX - dragobject.style.pixelLeft);

This is stored in a global variableso that the positioning gets right.

I also read if the onchange attribute is set and what kind of type x/y (horizontal/vertical).

Show the entire code for this function!

Catching the OnMouseUp Event

Very simple! Just release the dragobject

function moveme_onmouseup() {
	if(dragobject) {
		dragobject = null;
	}
}

Catching the OnMouseMove Event

Her is the moving done. I first check if the dragobject is set, then I seperate the x and y types. Now I check so that the mousepointer is outside of the slidebar container; if it isn't I update the position. I also set the value (0-1) for the slidebar by calculating the position and then I execute the onchange function.

function moveme_onmousemove() {
	if(dragobject) {
		if (type=="y") {
			if(event.clientY >= 0) {
				if ((event.clientY - ty > 0) && (event.clientY - ty < dragobject.parentElement.style.pixelHeight - dragobject.style.pixelHeight)) {
					dragobject.style.top = event.clientY - ty;
				}

				//Here is some extra positioning needed in case the mouse is outside the container

				dragobject.value = dragobject.style.pixelTop / (dragobject.parentElement.style.pixelHeight - dragobject.style.pixelHeight);
				eval(onchange.replace(/this./g, "dragobject."));
			}
		}
		else {
			...
		}
		
		window.event.returnValue = false;
		window.event.cancelBubble = true;
	} 
}

Show the entire code for this function!

setValue function

I also made a function called setValue(el, value) so that you could change the value through scripting.

Building your slidebar

Actually it's just a draggable element that's contained inside a container. You could have any HTML as you like. First you create a container (SPAN or DIV) with height and width defined. Inside this you creat an element with the class="sliderHandle" and the custom attribute type="x" or type="y". You could also (and probably should) add an onchange as well. You could define the value to 0 as well because it won't be valid until you set it (Currently the value starts at 0). The value represent the amount from the left as a quote.

You should also include the javascript file in your head like this:

<script type="text/javascript" src="slidebar.js"></script>

Here below is a very basic slidebar:

<div style="width: 200; height: 20;">
	<div class="sliderHandle" type="x"
	onchange="window.status = this.value)"
	style="width: 20; height: 100%; background: buttonface;">
	</div>
</div>

Horizontal Slidebar

This is like the one above but a little more styles added.



Percantage: 0%
(Note this has been rounded to the nearest integer)

Vertical Slidebar

This has the type set to y.

Percantage: 0%
(Note this has been rounded to the nearest integer)

Using setValue

This reads the value from the horizontal slidebar and sets the vertical to the same value using:

onclick="setValue(ver, hor.value)"

More samples

A Chrome Zoom (You need Chromeffects for this to work)

An RGB color sample

Author: Erik Arvidsson