# Slider

From JSXGraph Wiki

Revision as of 21:43, 21 January 2021 by A WASSERMANN (talk | contribs)

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}
```