JSFiddle - React, Tailwind, and code Playground

by cambraca

HTML

<link rel="stylesheet" href="http://www.luque.cc/public/css/jqueryui.css">
<div id="container">
    <center>works best on chrome and opera</center>
    <div id="display">
        <div id="circle"></div>
    </div>

    <div id="controls">
        <span id="l_lum">0.01</span>
        
        <div id="s_lum"></div>
    </div>
    <div id="log"></div>
</div>

CSS

body{
    font-family: Arial;
    background: silver;
}
#container{
    width: 960px;
    min-height: 500px;
    padding: 10px;
    position: relative;
    margin: auto;
    background: white;
    border-radius: 3px;
    box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
}
#display{
    width: 90%;
    border: 1px solid #aaa;
    position: relative;
    margin: auto;
    height: 300px;
    background: #ddd;
    overflow: hidden;
}
#circle{
    background-color: #666;
    width: 1px;
    height: 1px;
    position: absolute;
    top: 0px;
    left: 0px;
    border-radius: 50%;
}

JavaScript

$(function() {
    showBall(-2);
});

$("#s_lum").slider({
    slide: function(event, ui) {
        showBall(ui.value);
    },
    value: 1.0,
    min: -4,
    max: 6,
    step: 0.1
});

function calc(num) {
    return num * 10000;
    return num;
}

var showBall = function(val) {
    var num = Math.pow(10, val);
    //console.log(val);
    var _num = (num < 1) ? num.toPrecision(2) : Math.round(num)
    $('#l_lum').text(_num);


    //console.log(ctnrH + ' - ' + ballH + ' = ' + ballM);
    $('#circle').css({
        width: calc(num),
        height: calc(num)
    });

    var ctnrH = $('#display').height();
    var ballH = $('#circle').height();
    var ballM = (ctnrH / 2) - (ballH / 2);

    $('#circle').css({
        top: ballM
    });

}