« »

Use this drag and drop script to changeany actions such as change of background-color or font-color or sound-volume or images or game-speed or whatever you want to. Easy way to make your scripts more userfriendly.

Label: Bar Slider

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Free iPage Web Hosting for First Year NOW

If you're still looking for a reliable web host provider with affordable rates, why you don't take a little of time to try iPage, only with $1.89/month, included $500+ Free Extra Credits for the payment of 24 months ($45)?

Over 1,000,000+ existisng customers can not be wrong, definitely you're not, too! More important, when you register the web hosting at iPage through our link, we're going to be happy for resending a full refund to you. That's awesome! You should try iPage web hosting for FREE now! And contact us for anything you need to know about iPage. Try iPage for FREE First Year NOW

Code
CSS
JavaScript
HTML
Print

Copy All x2

<STYLE>
.drag {
	CURSOR: hand; POSITION: relative
}
</STYLE>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<SCRIPT language=JavaScript1.2>

/*
     This script downloaded from www.JavaScriptBank.com
     Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
*/

var sPosition;
var showPerc=100;
document.onmousedown=dragLayer
document.onmouseup=new Function("dragMe=false")

var Color= new Array();
Color[0] = "00";
Color[1] = "11";
Color[2] = "22";
Color[3] = "33";
Color[4] = "44";
Color[5] = "55";
Color[6] = "66";
Color[7] = "77";
Color[8] = "88";
Color[9] = "99";
Color[10] = "AA";
Color[11] = "BB";
Color[12] = "CC";
Color[13] = "DD";
Color[14] = "EE";
Color[15] = "FF";

// Demofunction to change bg-color by moving slider
var rVal,gVal,bVal, cCol
function chgBg() {
	cCol = document.bgColor; rVal=cCol.substr(1,2); gVal=cCol.substr(3,2); bVal=cCol.substr(5,2);
	ind = Math.round(showPerc/16); if (ind < 0) ind = 0; if (ind > 15) ind=15;
// If more sliders are used, each of them has to be handled separately
	if (kObj.id =="knobImg") document.bgColor="#"+Color[ind]+gVal+bVal;
	if (kObj.id =="knobImg1")  document.bgColor="#"+rVal+Color[ind]+bVal;
	if (kObj.id =="knobImg2")  document.bgColor="#"+rVal+gVal+Color[ind];
}

// Drag and move engine (original code by DynamicDrive.com), don't change unless explicitely indicated
var dragMe=false, kObj, yPos,direction
function moveLayer() {
if (event.button==1 && dragMe) {
	oldY = kObj.style.pixelTop; kObj.style.pixelTop=temp2+event.clientY-yPos; 
// Limit movement of knob to stay inside layer
	if (kObj.style.pixelTop > oldY) direction="dn"; else direction="up";
	if (kObj.style.pixelTop < 2 && direction=="up") {kObj.style.pixelTop=2; direction="dn";}
	if (kObj.style.pixelTop > 102 && direction=="dn") {kObj.style.pixelTop=102; direction="up";}
// Set working variable 'showPerc' depending on 100 or 250 scaling
	sPosition=kObj.style.pixelTop; showPerc = (perCent[0].checked) ? sPosition-2 : (sPosition-2)/2*5; 
// The following line should be replaced by the function-call with the actual task to perform
	chgBg(); 
	return false; }
}
function dragLayer() {
if (!document.all) return;
if (event.srcElement.className=="drag")	{dragMe=true; kObj=event.srcElement; temp2=kObj.style.pixelTop; yPos=event.clientY; document.onmousemove=moveLayer; }
}
</SCRIPT>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<!-- This would be a way to configure if slider range is 0-100 or 0-255 -->
<DIV id=outerLyr 
style="Z-INDEX: 1; LEFT: 155px; WIDTH: 23px; POSITION: absolute; TOP: 111px; HEIGHT: 120px; BACKGROUND-COLOR: #000000"><IMG 
class=drag id=knobImg 
style="Z-INDEX: 3; LEFT: 2px; WIDTH: 20px; TOP: 100px; HEIGHT: 17px" 
src="../image/logojs.gif"> 
<DIV id=innerLyr 
style="Z-INDEX: 2; LEFT: 2px; WIDTH: 20px; POSITION: absolute; TOP: 2px; HEIGHT: 117px; BACKGROUND-COLOR: #777777">
<DIV id=barLyr 
style="Z-INDEX: 1; LEFT: 9px; WIDTH: 2px; POSITION: absolute; TOP: 5px; HEIGHT: 110px; BACKGROUND-COLOR: #000000"></DIV></DIV></DIV>
<DIV id=outerLyr1 
style="Z-INDEX: 1; LEFT: 185px; WIDTH: 23px; POSITION: absolute; TOP: 111px; HEIGHT: 120px; BACKGROUND-COLOR: #000000"><IMG 
class=drag id=knobImg1 
style="Z-INDEX: 3; LEFT: 2px; WIDTH: 20px; TOP: 100px; HEIGHT: 17px" 
src="../image/logojs.gif"> 
<DIV id=innerLyr1 
style="Z-INDEX: 2; LEFT: 2px; WIDTH: 20px; POSITION: absolute; TOP: 2px; HEIGHT: 117px; BACKGROUND-COLOR: #777777">
<DIV id=barLyr1 
style="Z-INDEX: 1; LEFT: 9px; WIDTH: 2px; POSITION: absolute; TOP: 5px; HEIGHT: 110px; BACKGROUND-COLOR: #000000"></DIV></DIV></DIV>
<DIV id=outerLyr2 
style="Z-INDEX: 1; LEFT: 215px; WIDTH: 23px; POSITION: absolute; TOP: 111px; HEIGHT: 120px; BACKGROUND-COLOR: #000000"><IMG 
class=drag id=knobImg2 
style="Z-INDEX: 3; LEFT: 2px; WIDTH: 20px; TOP: 100px; HEIGHT: 17px" 
src="../image/logojs.gif"> 
<DIV id=innerLyr2 
style="Z-INDEX: 2; LEFT: 2px; WIDTH: 20px; POSITION: absolute; TOP: 2px; HEIGHT: 117px; BACKGROUND-COLOR: #777777">
<DIV id=barLyr2 
style="Z-INDEX: 1; LEFT: 9px; WIDTH: 2px; POSITION: absolute; TOP: 5px; HEIGHT: 110px; BACKGROUND-COLOR: #000000"></DIV></DIV></DIV><INPUT 
type=radio value=false name=perCent>Prozent <INPUT type=radio CHECKED value=true 
name=perCent>255 </td>
	</tr>
</table>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Comment (0)
Write

by Preview

Cancel reply

Write your comment

Comments of Guest will be previwed before published
Give your real email to get notifying replies, or comment will be deleted

Your name *
Your email^g *
~~Your site~~

Comment's title

I assure 100% I am real human
I repeat I am not bot

Sent (0)
New

BBCode
HTML
URL
JID

https://tooly.win
Open tool hub for free to use by any one for every one with hundreds of tools

chatGPTaz
Voice chat comning soon. You could talk to ChatGPT and hear the most intelligent AI speaks very soon

Cool Domains for Sale!

CoinHolo.com ABP3.com choose.works CreditCard.rip XMQV.com index.services CryptoKD.com eChainBank.com this.bid Card.rip war.money ZWVQ.com ChainTutor.com system.money pornID.net ChatTotal.com YeuNu.com choose.exchange CTRCoin.com ApexBTC.com

Submit day:
Author:
Previews:
Comment:
Votes:
Sent:
Size:
Rank:

30/01/2007
DynamicDrive.com [more]
5,149
0
22
0
6.17 KBytes

JavaScript Bar Slider

2.6/5 22 votes / 5,149 previews / 0 comment 30/01/2007 Use this drag and drop script to changeany actions such as change of background-color or font-color or sound-volume or i...JavaScript Bar Slider - Bar Slider

hoivv csnookerking[3]

Let's be first member to do this

xuanducvn