Difference between revisions of "Slider"
From JSXGraph Wiki
Jump to navigationJump to searchA WASSERMANN (talk | contribs) |
A WASSERMANN (talk | contribs) |
||
(12 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 | + | 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=" | + | <link rel="stylesheet" type="text/css" href="https://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" /> |
− | <script type="text/javascript" src=" | + | <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"> | <script type="text/javascript"> | ||
− | var | + | 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 | + | var a = board.create('point',[ |
− | var a = | + | function(){return s.Value();}, |
− | + | function(){return 3/s2.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) | ||
+ | |||
+ | ===The JavaScript code=== | ||
− | |||
<source lang="html4strict"> | <source lang="html4strict"> | ||
− | <link rel="stylesheet" type="text/css" href=" | + | <link rel="stylesheet" type="text/css" href="https://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" /> |
− | <script type="text/javascript" src=" | + | <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> | ||
</source> | </source> | ||
<source lang="javascript"> | <source lang="javascript"> | ||
− | var | + | |
− | + | 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 | + | var s2 = board.create('slider',[[1,-3.5],[5,-3.5],[0,1,5]],{name:'s2',snapWidth:1}); |
− | var a = | + | var a = board.create('point',[ |
− | + | function(){return s.Value();}, | |
− | + | function(){return 3/s2.Value();} | |
− | + | ],{trace:true} | |
</source> | </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}