JSFiddle - React, Tailwind, and code Playground

by migerh

HTML

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

JavaScript

var brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox: [0,1,15,11]});
                var sl1 = brd.create('slider', [[5,10],[10,10],[-5,-5,15]]);
                
                        a1 = brd.create('arc', [
                            brd.create('point',[7,12],{visible:false}),
                            brd.create('point',[3,2],{visible:false}),
                            brd.create('point',[11,2],{visible:false})],
                            {firstArrow:true, lastArrow:false, strokeOpacity:1});
                        a2 = brd.create('arc', [
                            brd.create('point',[7,14],{visible:false}),
                            brd.create('point',[3,4],{visible:false}),
                            brd.create('point',[11,4],{visible:false})],
                            {firstArrow:true, lastArrow:false, strokeOpacity:function() { if ((sl1.Value() <= 5) && (sl1.Value() > 0)) return 1; else  return 0; }});
                        a3 = brd.create('arc', [
                            brd.create('point',[7,17],{visible:false}),
                            brd.create('point',[3,7],{visible:false}),
                            brd.create('point',[11,7],{visible:false})],
                            {firstArrow:false, lastArrow:true, strokeOpacity:1});
                        a4 = brd.create('arc', [
                            brd.create('point',[7,19],{visible:false}),
                            brd.create('point',[3,9],{visible:false}),
                            brd.create('point',[11,9],{visible:false})],
                            {firstArrow:false, lastArrow:true, strokeOpacity:function() { if ((sl1.Value() > 5) && (sl1.Value() <= 10)) return 1; else  return 0; }});
                            
                        sl1.moveTo([10,10], 3000);