JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/base/jquery-ui.css">
<div id="View"></div>


<div id="toolbar">
<p>f1<div id="sliderf1"></div></p>
<p>f2<div id="sliderf2"></div></p>
<p>w1<div id="sliderw1"></div></p>
<p>w2<div id="sliderw2"></div></p>
</div>

CSS

#toolbar{
width: 200px;
}
#View{
position:absolute;
}

JavaScript

var A1=2;
var A2=100;
var f1;
var f2;
var W1;
var W2;
function SetPixel(x,y)
{
   
var str="";
str='<div style="position:absolute; left:'+parseInt(x,10)+'px; top:'+parseInt(y,10)+'px; width:2px; height:2px; background-color:black "></div>';
  
return str;
}

function x(t)
{
  return A2*Math.cos(W2*t);
}

function y(t)
{
f=f1-(W2*f2)/W1;
  return A1*Math.cos(W1*t+f);
}

function Redraw()
{
var str="";
f1=$( "#sliderf1" ).slider( "option", "value" );
f2=$( "#sliderf2" ).slider( "option", "value" );
W1=$( "#sliderw1" ).slider( "option", "value" );
W2=$( "#sliderw2" ).slider( "option", "value" );
for( var t=0; t < 500; t=t+0.2)
{
   str+=SetPixel( x(t) + 400, - y(t) * 100 + 200);
}
$("#View").empty();
    
$("#View").append(str);
}

$(function(){
            $('#sliderf1').slider({
                    range: false
                });
            $('#sliderf2').slider({
                    range: false
                });
            $('#sliderw1').slider({
                    range: false
                });
            $('#sliderw2').slider({
                    range: false
                });
                });
$( "#sliderf1" ).slider({
   change: function() {
    Redraw();   
   }
});
$( "#sliderf2" ).slider({
   change: function() {
    Redraw();   
   }
});
$( "#sliderw1" ).slider({
   change: function() {
    Redraw();   
   }
});
$( "#sliderw2" ).slider({
   change: function() {
    Redraw();   
   }
});
//////////////////////////////////////////////////
$( "#sliderw1" ).slider( "option", "max", 20 );
$( "#sliderw1" ).slider( "option", "min", 1 );
$( "#sliderw1" ).slider( "option", "animate", true );
$( "#sliderw1" ).slider( "option", "value", 2 );
///////////////////////////////////////////////////
$( "#sliderw2" ).slider( "option", "max", 20 );
$( "#sliderw2" ).slider( "option", "min", 1 );
$( "#sliderw2" ).slider( "option", "animate", true );
$( "#sliderw2" ).slider( "option", "value", 4 );
//////////////////////////////////////////////////
$( "#sliderf1"...