# Difference between revisions of "Slider"

From JSXGraph Wiki

Jump to navigationJump to searchA WASSERMANN (talk | contribs) |
A WASSERMANN (talk | contribs) |
||

Line 20: | Line 20: | ||

</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 | ||

JavaScript code: | JavaScript code: |

## Revision as of 15:45, 25 January 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

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});
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();}
]);
```