Member Avatar for jools68

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>
  • 2 Contributors
  • 2 Replies
  • 110 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by itsjareds

Recommended Answers

All 2 Replies

Member Avatar for jools68

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.

Member Avatar for itsjareds

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.