From JSXGraph Wiki

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


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

The JavaScript code

<link rel="stylesheet" type="text/css" href="" />
<script type="text/javascript" src=""></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();}