Slider: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
Line 1: Line 1:
Sliders enable a convenient way to experiment with mathematical constructions.
Sliders enable a convenient way to experiment with mathematical constructions.
In the example below there is a slider ''s'' which takes values between 1 and 5.
Example:
The value of the slider can be accessed via ''s.Value()''.
The ''x''-coordinate and the ''y''-coordinate of the point ''A'' depend on this value
''s.Value()'':
<html>
<html>
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
Line 13: Line 10:
ax = b.createElement('axis', [[0,0], [1,0]], {});
ax = b.createElement('axis', [[0,0], [1,0]], {});
ay = b.createElement('axis', [[0,0], [0,1]], {});
ay = b.createElement('axis', [[0,0], [0,1]], {});
var s = b.createElement('slider',[[0,-3],[4,-3],[1,1,5]]);
var s = b.createElement('slider',[[0,-3],[4,-3],[1,1,5]],{name:'S'});
var a = b.createElement('point',[
var a = b.createElement('point',[
                       function(){return s.Value();},
                       function(){return s.Value();},
Line 20: Line 17:
</script>
</script>
</html>
</html>
JavaScript code:
<source lang="html4script">
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script>
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
<div id="jxgbox" class="jxgbox" style="width:600px; height:400px;"></div>
</source>
<source lang="javascript">
var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 60, unitY: 40});       
ax = b.createElement('axis', [[0,0], [1,0]], {});
ay = b.createElement('axis', [[0,0], [0,1]], {});
var s = b.createElement('slider',[[0,-3],[4,-3],[1,1,5]]);
var a = b.createElement('point',[
                      function(){return s.Value();},
                      function(){return 3/s.Value();}
                      ]);
</source>

Revision as of 13:34, 25 January 2009

Sliders enable a convenient way to experiment with mathematical constructions. Example:

Retrieved from "http://jsxgraph.org/wiki/index.php?title=Slider&oldid=1204"