Difference between revisions of "Slider"

From JSXGraph Wiki
Jump to navigationJump to search
Line 10: Line 10:
 
<div id="jxgbox" class="jxgbox" style="width:600px; height:400px;"></div>
 
<div id="jxgbox" class="jxgbox" style="width:600px; height:400px;"></div>
 
<script type="text/javascript">
 
<script type="text/javascript">
var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 60, unitY: 40});       
+
var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 60, unitY: 40, axis:true});      
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 s = b.createElement('slider',[[0,-3],[4,-3],[1,1,5]]);
 
var a = b.createElement('point',[
 
var a = b.createElement('point',[
Line 27: Line 25:
 
* start: initial value of the slider  
 
* start: initial value of the slider  
 
* max: maximum value of the slider
 
* max: maximum value of the slider
 +
Properties:
 
* snapWidth: distance between two values. (snapWidth:1: slider with integer values)
 
* snapWidth: distance between two values. (snapWidth:1: slider with integer values)
  
Line 37: Line 36:
 
</source>
 
</source>
 
<source lang="javascript">
 
<source lang="javascript">
var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 60, unitY: 40});       
+
var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 60, unitY: 40, axis:true});      
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 s = b.createElement('slider',[[0,-3],[4,-3],[1,1,5]]);
 
var a = b.createElement('point',[
 
var a = b.createElement('point',[

Revision as of 00:31, 24 June 2009

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. 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():

The slider needs the following input parameters:

  • [[x1,y1],[x2,y2],[min,start,max]]
  • [x1,y1]: first point of the ruler
  • [x2,y2]: last point of the ruler
  • min: minimum value of the slider
  • start: initial value of the slider
  • max: maximum value of the slider

Properties:

  • snapWidth: distance between two values. (snapWidth:1: slider with integer values)

JavaScript code:

<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>
var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 60, unitY: 40, axis:true});        
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();}
                       ]);