Inside Technique : WebFX DHTML Demos : Slide Bar

This script extends the generic drag-drop script to check if the the mouse is within a container boundary. Once this was finished, it became easy to build the slider.

Below is a demonstration of the slide bar. Be sure not to miss the color picker demonstration for a more useful demonstration of the slide bar.

Demonstration requires Internet Explorer 4.0 or later

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 variable so 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!

function moveme_onmousedown() {
	var tmp = getReal(window.event.srcElement, "className", "sliderHandle");	//Traverse the element tree
	if(tmp.className == "sliderHandle") {
		dragobject = tmp;		//This is a global reference to the current dragging object

		onchange = dragobject.getAttribute("onchange");	//Set the onchange function
		if (onchange == null) onchange = "";
		type = dragobject.getAttribute("type");			//Find the type

		if (type=="y")		//Vertical
			ty = (window.event.clientY - dragobject.style.pixelTop);
		else				//Horizontal
			tx = (window.event.clientX - dragobject.style.pixelLeft);

		window.event.returnValue = false;
		window.event.cancelBubble = true;
	}
	else {
		dragobject = null;	//Not draggable
	}	
}

Catching the OnMouseUp Event

Very simple! Just release the dragobject

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

Catching the OnMouseMove Event

Here 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!

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
				if (event.clientY - ty < 0) {
					dragobject.style.top = "0";
				}
				if (event.clientY - ty > dragobject.parentElement.style.pixelHeight - dragobject.style.pixelHeight - 0) {
					dragobject.style.top = dragobject.parentElement.style.pixelHeight - dragobject.style.pixelHeight;
				}
		//
				dragobject.value = dragobject.style.pixelTop / (dragobject.parentElement.style.pixelHeight - dragobject.style.pixelHeight);
				eval(onchange.replace(/this./g, "dragobject."));	//replace the this reference by dragobject
			}
		}
		else {
			if(event.clientX  >= 0) {
				if ((event.clientX  - tx >= 0) && (event.clientX - tx <= dragobject.parentElement.clientWidth - dragobject.style.pixelWidth)) {
					dragobject.style.left = event.clientX - tx;
				}
				if (event.clientX - tx < 0) {
					dragobject.style.left = "0";
				}
				if (event.clientX - tx > dragobject.parentElement.clientWidth - dragobject.style.pixelWidth - 0) {
					dragobject.style.left = dragobject.parentElement.clientWidth - dragobject.style.pixelWidth;
				}

				dragobject.value = dragobject.style.pixelLeft / (dragobject.parentElement.clientWidth - dragobject.style.pixelWidth);
				eval(onchange.replace(/this./g, "dragobject."));
			}
		}
		
		
		window.event.returnValue = false;
		window.event.cancelBubble = true;
	} 
}

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>

Vertical Slidebar

This sets the type of the slider bar to "y".

Demonstration requires Internet Explorer 4.0 or later

Using setValue

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

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

Demonstration requires Internet Explorer 4.0 or later

For a more complete and useful demonstration, see the RGB color picker.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.