JSFiddle - React, Tailwind, and code Playground

by tjansen

HTML

<script src="http://minifiedjs.com/download/minified-src.js"></script>
<div id="colorChanger">
    <div id="sizeChanger"></div>
</div>

Enter a value (0-1) here: <input id="val" value="0.25" size="3"/>

CSS

#colorChanger { width: 200px; height: 200px; border: 1px solid red; position: relative;}
#sizeChanger { left: 10px; top: 50px; width: 180px; height: 100px; background-color: white; border: 1px solid green; position: absolute;}

JavaScript

var MINI = require('minified'), $=MINI.$, $$=MINI.$$;

var tsColor = $('#colorChanger').dial({$backgroundColor: '#000'}, {$backgroundColor: '#fff'}, 1);
var tsSize = $('#sizeChanger').dial({$left: '2px', $width: '196px'}, 
                                    {$left: '98px', $width: '4px'}, 1);
tsColor(0.25);
tsSize(0.25);

$('#val').onChange(function(value) {
    var v2 = parseFloat(value);
    if (!isNaN(v2)) {
        tsColor(v2);
        tsSize(v2);
    }
});