JSFiddle - React, Tailwind, and code Playground

by lucasprus

HTML

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

<div id="slider"></div>
<div id="slider2"></div>

</div><!-- End demo -->



<div class="demo-description">
<p>The basic slider is horizontal and has a single handle that can be moved with the mouse or by using the arrow keys.</p>
</div><!-- End demo-description -->

<div id="container" class="ui-widget-content ui-corner-all">

<div id="swatch" class="ui-widget-content ui-corner-all"></div>

<div id="box"></div>

</div>

CSS

#demo-frame > div.demo { padding: 10px !important; }

    #swatch {
        width: 120px;
        height: 120px;
        margin-top: 18px;
        margin-left: 350px;
        background-image: none;
}

#box {
   width:100px;
   height:100px;
   position:absolute;
   top:100px;
   left:100px; 
   text-indent: 90px;
   background-color:red;
}

.active {
    border: 2px solid blue;
}

JavaScript

$(function() {


    function refreshSwatch() {
        var zoom = $("#slider").slider("value");
        $("div.active").width(zoom);
        $("div.active").height(zoom);
    }

    function refreshSwatch2() {
        var zoom = $("#slider2").slider("value");
        $('div.active').css('-webkit-transform', 'rotate(' + zoom + 'deg)');
    }

    $("#slider").slider({
        orientation: "horizontal",
        range: "min",
        max: 255,
        value: 120,
        slide: refreshSwatch,
        change: refreshSwatch
    });

    $("#slider2").slider({
        orientation: "horizontal",
        range: "min",
        max: 255,
        value: 100,
        slide: refreshSwatch2,
        change: refreshSwatch2
    });
    $("#box").draggable();

    $("#container, #swatch, #box").click(function(event) {
        event.stopPropagation();
        $("#container, #swatch, #box").removeClass("active");
        $(this).addClass("active");
    });

});