JSFiddle - React, Tailwind, and code Playground

by psoares

HTML

<html>
    <head>
        <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dijit/themes/claro/claro.css"/>
    </head>
    <body class="claro">
        <div id="chart" style="width:500px; height:300px; background-color:#dfdfdf"></div>
        <div style="width:500px;">
            <div id="leftSlider"></div>
            <div id="rightSlider"></div>     
        </div>
    </body>
</html>

JavaScript

dojo.require("dijit.form.HorizontalRule");
dojo.require("dijit.form.HorizontalRuleLabels");
dojo.require("dojox.charting.themes.Tufte");
dojo.require("dijit.form.HorizontalSlider");
dojo.require("dojox.charting.Chart");
dojo.require("dojox.charting.plot2d.StackedAreas");
dojo.require("dojox.charting.axis2d");

var values = [36,297,1202,205,160,130,122,121,120,111,116,65,118,123,118,104,144,114,141,216,134,216,89,89,103,95,85,95,93,101,103,98,96,116,119,129,112,104,107,103,86,100,107,81,117,96,105,115,115,116,129,117,116,127,129,121,125,118,133,128,128,136,110,142,152,144,162,154,154,134,148,166,140,168,154,158,177,186,169,210,202,230,232,237,226,251,298,313,410,469,614,765,982,1352,1796,2239,2806,3217,3800,4378,5083,5353,5728,6111,6000,6051,5901,5835,5569,5212,4736,4408,3816,3340,2782,2223,1909,1525,1218,1057,878,645,521,421,296,270,234,197,151,165,150,128,143,142,135,127,146,107,108,109,130,126,134,114,116,102,124,158,148,130,120,137,138,165,130,136,124,121,137,122,131,106,119,136,109,100,91,118,115,94,104,99,101,99,91,113,95,111,88,92,102,87,109,83,99,100,88,100,79,79,96,116,98,84,88,72,74,82,78,85,93,68,96,92,84,77,101,106,87,102,110,96,121,107,110,112,110,113,120,96,106,100,109,109,139,147,126,147,140,143,118,125,129,132,132,118,116,129,140,124,111,125,117,134,91,100,116,89,12];

var labels = [];

for (var i = 0; i < values.length; i++) {
    labels.push({ value : i+1, text : values[i]});   
}

dojo.ready(function(){
    var leftSlider = new dijit.form.HorizontalSlider({
        intermediateChanges : "false",
        minimum : 30,
        maximum : 80,
        value : 30,
        style : "width : 200px; float:left;"
    }, "leftSlider").addChild(new dijit.form.HorizontalRule({count:"10", style : "height:5px"}));
    
    var rightSlider = new dijit.form.HorizontalSlider({
        intermediateChanges : "false",
        minimum : 30,
        maximum : 80,
        value : 30,
        style : "width : 200px; float:right;"
    }, "rightSlider").addChild(new...