JSFiddle - React, Tailwind, and code Playground

by Anders Kitson

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
  <div class="container">
    <div class="span6 offset1">
         <p>
  <label for="amount">Slider 1</label>
  <input type="text" id="amount1" style="border:0; color:#f6931f; font-weight:bold;">
</p>
 
        <div id="slider"></div>
                      
<div id="slider1"></div>
        
        <p>
  <label for="amount">Slider 2</label>
  <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;">
</p>
    </div>
  </div>

CSS

#slider {
  width: 500px;
}

.container {
    margin-top: 0 auto;
}

#slider{
    width:400px;
    margin:auto;
    margin-top: 150px;
    margin-bottom:50px;
}

#slider1{
    width:400px;
    margin:auto;
}

svg{
    margin:auto;
    display:block;
}

.collapse{
    fill: #92BAF5;
}

.collapse1{
    fill: #E6E6E6;
}



svg{
    float:left;
    display:inline;
    -webkit-transform: rotate(180deg);
}

.svgLeft{
    display:inline;
    float:left;
  
}

#amount{
    border:none !important;
}

JavaScript

$("#slider").slider({
    max: 30
});

$("#slider").slider({
    min: 10
});

$("#slider1").slider({
    max: 25
});

$("#slider1").slider({
    min: 10
});









$("#slider, #slider1").slider({
    value: 10,
    animate: "fast" ,
    slide: function (event, ui) {
        var selection = $("#slider").slider("value");
        
        var selection1 = $("#slider1").slider("value");
        
        $( "#amount1" ).val( "$" + selection );
        
        $( "#amount" ).val( "$" + selection1 );
        
       
        //console.log(selection);
        console.log(selection1);
        
        //Width and height
        var w = 200;
        var h = 2000;

        //Data
        var dataset = [];
        
        var dataset1 = [];
        
        //Basic Maths Here

        dataset.push(selection * selection1);
        
        dataset1.push(selection * 2);

        console.log(dataset);  
        console.log(dataset1); 

        var rectangle = svg.selectAll("rect")
        .classed("collapse", true)
       
            .data(dataset);
        
        var rectangle1 = svg1.selectAll("rect")
        .classed("collapse1", true)
       
            .data(dataset1);
        
        
        
        rectangle
            .enter()
        
            .append("rect");
        
        
        rectangle1
            .enter()
            .append("rect");

        rectangle.attr("width", 200)
        .transition()
            .attr("height", function (d) { console.log('d is ' + d);
            return d;
        })
            .attr("x", function (d) {
            return 40;
        })
            .attr("y", function (d) {
            return 40;
        });
        
         rectangle1.attr("width", 200)
         .transition()
            .attr("height", function (d) { console.log('d is ' + d);
            return d;
        })
            .attr("x", function (d) {
            return 40;
        })
            .attr("y", function (d) {
            return 40;
       ...