JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

vvar frequence=50;
		var periode = 1/frequence;
		var brd = JXG.JSXGraph.initBoard('jsgbox',{axis:true, showNavigation:false,showCopyright:false, boundingbox:[-0.001,1.1,periode+0.001,-1.1]});
		var  Nbpoints = brd.create('slider',[[periode/2,0.8],[3*periode/4,0.8],[2,7,30]],{name:'Nb points',snapWidth:1,precision:0});
		function y(x)
			{
			return Math.sin(2*Math.PI*frequence*x); 
			}

		var courbe1 = brd.create('functiongraph',[y, 0, periode],{strokeWidth:1, trace:false});