JSX Graph Example

Reference: http://jsxgraph.uni-bayreuth.de/wp/

HTML

<script src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
<link rel="stylesheet" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css">
<div id="jsxgbox" class="jxgbox" style="width:500px; height:500px;"></div

JavaScript

var board = JXG.JSXGraph.initBoard('jsxgbox', {axis : false, boundingbox : [-5, 11, 6, -5]});

var s = board.create('slider', [[-2, 4], [2, 4], [1, 50, 100]]);


s.on('drag', function () {
    var val = s.Value().toFixed(0);
    p.setAttribute({size: val});
});
var p = board.create('point', [0, 0], {size: 'val'});