JSFiddle - React, Tailwind, and code Playground

by gion_13

HTML

<!--
<script type="text/javascript" src="http://cubiq.org/dropbox/iscroll4/src/iscroll.js"></script>
-->
<div id="slider_container">
    <div class="progress">
        <div class="slider"></div>
    </div>
</div>
<div id='scale_container'>
    <div id="scale">
    
    </div>
</div>

CSS

body{
    background : #ced;
}
#scale_container{
    width : 100%;
    height : 500px;
    position : absolute;
    bottom : 0;
    left : 0;
    overflow : hidden;
    border : 2px solid red;
}
#scale{
    width : 101%;
    height : 101%;
    position : relative;
    top : 0;
    left : 0;
    background-image : url('http://realitypod.com/wp-content/uploads/2010/09/Flower_Garden_Twitter_BG_by_ArtandMore.jpg');
    background-size : 100% 100%;   
    /*
     -moz-transition : all ease-in 100ms;
    -webkit-transition : all ease-in 100ms;
    -o-transition : all ease-in 100ms;
    -khtml-transition : all ease-in 100ms;
    -ms-transition : all ease-in 100ms;
    transition : all ease-in 100ms;
    /**/
}

#slider_container{
    width : 200px;
    height : 30px;
    background : #f90;
    border : 1px dashed blue;
}
.progress{
    background : green;
    width : 0%;
    height : 100%;
    position : relative;
    -moz-transition : all ease-in 200ms;
    -webkit-transition : all ease-in 200ms;
    -o-transition : all ease-in 200ms;
    -khtml-transition : all ease-in 200ms;
    -ms-transition : all ease-in 200ms;
    transition : all ease-in 200ms;
}
.slider{
    position : absolute;
    top : 0;
    right : 0;
    width : 5px;
    height : 100%;
    background : black;
}

JavaScript

var scale = $('#scale');
scale.data('scale',1);



/*!
 * iScroll v4.1.9 ~ Copyright (c) 2011 Matteo Spinelli, http://cubiq.org
 * Released under MIT license, http://cubiq.org/license
 */
 
(function(){
var m = Math,
    vendor = (/webkit/i).test(navigator.appVersion) ? 'webkit' :
        (/firefox/i).test(navigator.userAgent) ? 'Moz' :
        'opera' in window ? 'O' : '',
 
    // Browser capabilities
    has3d = 'WebKitCSSMatrix' in window && 'm11' in new WebKitCSSMatrix(),
    hasTouch = 'ontouchstart' in window,
    hasTransform = vendor + 'Transform' in document.documentElement.style,
    isAndroid = (/android/gi).test(navigator.appVersion),
    isIDevice = (/iphone|ipad/gi).test(navigator.appVersion),
    isPlaybook = (/playbook/gi).test(navigator.appVersion),
    hasTransitionEnd = isIDevice || isPlaybook,
    nextFrame = (function() {
        return window.requestAnimationFrame
            || window.webkitRequestAnimationFrame
            || window.mozRequestAnimationFrame
            || window.oRequestAnimationFrame
            || window.msRequestAnimationFrame
            || function(callback) { return setTimeout(callback, 1); }
    })(),
    cancelFrame = (function () {
        return window.cancelRequestAnimationFrame
            || window.webkitCancelRequestAnimationFrame
            || window.mozCancelRequestAnimationFrame
            || window.oCancelRequestAnimationFrame
            || window.msCancelRequestAnimationFrame
            || clearTimeout
    })(),
 
    // Events
    RESIZE_EV = 'onorientationchange' in window ? 'orientationchange' : 'resize',
    START_EV = hasTouch ? 'touchstart' : 'mousedown',
    MOVE_EV = hasTouch ? 'touchmove' : 'mousemove',
    END_EV = hasTouch ? 'touchend' : 'mouseup',
    CANCEL_EV = hasTouch ? 'touchcancel' : 'mouseup',
    WHEEL_EV = vendor == 'Moz' ? 'DOMMouseScroll' : 'mousewheel',
 
    // Helpers
    trnOpen = 'translate' + (has3d ? '3d(' : '('),
    trnClose = has3d ? ',0)' : ')',
 
    //...