Difference between revisions of "Slider"

From JSXGraph Wiki
Jump to navigationJump to search
 
(16 intermediate revisions by 2 users not shown)
Line 2: Line 2:
 
In the example below there is a slider ''s'' which takes values between 1 and 5.
 
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 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
+
The ''x''-coordinate and the ''y''-coordinate of the point ''A'' depend on the values of
''s.Value()'':
+
the slider ''s'' and ''s2'' which can be accessed via
 +
''s.Value()'' and ''s2.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="https://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="https://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.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>
 
<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 board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-3, 5, 7, -5], axis:true});         
ax = b.createElement('axis', [[0,0], [1,0]], {});
+
var s = board.create('slider',[[0,-3],[4,-3],[1,1,5]]);
ay = b.createElement('axis', [[0,0], [0,1]], {});
+
var s2 = board.create('slider',[[1,-3.5],[5,-3.5],[0,1,5]],{name:'s2',snapWidth:1});
var s = b.createElement('slider',[[0,-3],[4,-3],[1,1,5]]);
+
var a = board.create('point',[
var a = b.createElement('point',[
+
                function(){return s.Value();},
                      function(){return s.Value();},
+
                function(){return 3/s2.Value();}
                      function(){return 3/s.Value();}
+
                ],{trace:true});
                      ]);
 
 
</script>
 
</script>
 
</html>
 
</html>
 +
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:
+
===The JavaScript code===
<source lang="html4script">
+
 
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
+
<source lang="html4strict">
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script>
+
<link rel="stylesheet" type="text/css" href="https://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
+
<script type="text/javascript" src="https://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
 
<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">
 
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();}
 
                      ]);
 
</script>
 
 
</source>
 
</source>
 +
<source lang="javascript">
 +
 +
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-3, 5, 7, -5], axis:true});       
 +
var s = board.create('slider',[[0,-3],[4,-3],[1,1,5]]);
 +
var s2 = board.create('slider',[[1,-3.5],[5,-3.5],[0,1,5]],{name:'s2',snapWidth:1});
 +
var a = board.create('point',[
 +
                function(){return s.Value();},
 +
                function(){return 3/s2.Value();}
 +
                ],{trace:true}
 +
</source>
 +
 +
[[Category:Examples]]

Latest revision as of 21:43, 21 January 2021

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 the values of the slider s and s2 which can be accessed via s.Value() and s2.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)

The JavaScript code

<link rel="stylesheet" type="text/css" href="https://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
<script type="text/javascript" src="https://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
<div id="jxgbox" class="jxgbox" style="width:600px; height:400px;"></div>
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-3, 5, 7, -5], axis:true});        
var s = board.create('slider',[[0,-3],[4,-3],[1,1,5]]);
var s2 = board.create('slider',[[1,-3.5],[5,-3.5],[0,1,5]],{name:'s2',snapWidth:1});
var a = board.create('point',[
                 function(){return s.Value();},
                 function(){return 3/s2.Value();}
                 ],{trace:true}