I'm working on a page that needs to do some calculations based on values that the user inputs via sliders. I can get the values selected to display in a text box below the slider, but I also need to store the value as a variable for use in calculations. Any ideas on how I can do this? I'm very new to javascript so thank you for your patience. If you need any other details/source files please let me know.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Slider Calculator</title>
<link rel="stylesheet" href="../_common/css/main.css" type="text/css" media="all">
<link href="slider.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../_common/js/mootools.js"></script>
<script type="text/javascript" src="slider.js"></script>
</head>

<body>


<div id="container">
<h2>User-Inputs</h2>
</div>
<!--Slider-->
	<div id="container">	
		
		<h3>Please select a number below:</h3>
		<div><b>20&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;23&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;26&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;29</b> 
		  <div id="slideContainer2"><div id="slideHandle2"></div></div>
		  <div id="pos2"></div>
		
		<script type="text/javascript">
			
			window.addEvent('domready', function(){
			
		var slider2 = new Slider('slideContainer2', 'slideHandle2', {
			snap: false,
			
			<!-- Animation Speed (Higher = Slower) -->
			onTick: function(pos){
				this.knob.effect(this.p, {duration: 400, transition: Fx.Transitions.quadOut}).start(pos);
			},

			onComplete: 
			function(val){
				$('pos2').setHTML(20+(val*3));
			},
			steps: 3
			});
			});			
		</script>
	</div>
</body>
</html>

I forgot to mention I'm using mootools...

So if there's nobody familiar with that here, then please disregard my question.

Sorry for any inconvenience.

It's alright, you may want to try the Existing Scripts forum though. That forum is for prewritten scripts or script libraries such as MooTools.

Be sure to include MooTools in your topic so that the right people view your thread.

edit: You could also try the MooTools forums if you can't get any help.

This article has been dead for over six months. Start a new discussion instead.