JSFiddle - React, Tailwind, and code Playground

by Vince

HTML

<script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<h4>Slot Test</h4>
<div id="holder">
    <div class="slots-holder">
        <div class="slots">
            <img src="http://lorempixel.com/400/400" />
        </div>
        <div class="slider" title="Drag slider to resize"></div>
	</div>
    <div class="slots-holder">
        <div id="snowman" class="slots">
            <img src="http://lorempixel.com/g/400/400" />
        </div>
        <div class="slider" title="Drag slider to resize"></div>
	</div>
</div>

CSS

html, body {
    width: 100%;
    height: 100%;
    background-color: yellow;
    margin: 0;
    padding: 0;
}
#holder {
}
.slots-holder {
    height: 400px;
    width: 260px;
    display: block;
    margin: 10px auto auto;
}
.slots {
    width: 200px;
    height: 200px;
    overflow: hidden;
    box-shadow: 0 0 4px black;
    margin-bottom: 10px;
}
#snowman.slots {
    border-radius: 100px;
}
.slots img {
    cursor: move;
}
a.ui-slider-handle {
    outline: none;
    margin-top: 4px;
}
.slider {
    width: 200px;
    height: 20px;
    z-index: 100;
}

JavaScript

$('.slots img').draggable({
    scrollSensitivity: 100
});
$(document).tooltip({track: true});
$('.slider').slider({
    value: 1,
    step: 0.01,
    min: .5,
    max: 2.5,
    slide : function (event, ui) {
        //console.log(ui.value);
        $(this).siblings('.slots').children('img').css({
            '-webkit-transform':'scale(' + ui.value + ')'
        });
    }
});