JSFiddle - React, Tailwind, and code Playground

HTML

<div id="animation" class="showRoll">
        <div id="frame"></div>
        <div id="roll"></div>
    </div>
    
    <ul>
        <li><label><input id="show" type="checkbox"> show sprite</label></li>
        <li>
            <div id="duration">
                <label id="duration-label" class="isLeft">1</label>
                <input id="duration-input" type="range" min="0.2" value="1" max="4" step="0.1">
            </div>
            animation-duration
        </li>
    </ul>

CSS

/* Global ------------------------------------------------------ */

html {
    height: 100%;
    font:62.5%/1 "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
    background: #f0f0f0 url(../img/bg.png);
}

body {
    margin: 0;
    width: 100%;
    height: 100%;
    padding: 50px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
    overflow: hidden;
    text-align: center;
    
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-align: center;
    -webkit-box-pack: center;
    
    display: -webkit-flex;
    display:    -moz-flex;
    display:     -ms-flex;
    display:      -o-flex;
    display:         flex;
    
    -webkit-flex-direction: column;
       -moz-flex-direction: column;
        -ms-flex-direction: column;
         -o-flex-direction: column;
            flex-direction: column;
    
    -webkit-justify-content: center;
       -moz-justify-content: center;
        -ms-justify-content: center;
         -o-justify-content: center;
            justify-content: center;
    
    -webkit-align-items: center;
       -moz-align-items: center;
        -ms-align-items: center;
         -o-align-items: center;
            align-items: center;    
}

a {
    text-decoration: none;
    color: hsl(210,100%,60%);
}

a:hover {
    color: hsl(210,100%,70%);
}

a:active {
    color: hsl(210,100%,50%);
}

p {
    font-size: 11px;
    line-height: 1.5;
    color: hsl(0,0%,60%);
}

.hl {
    color: hsl(0,0%,20%);
}

ul {
    margin: 80px 0;
    list-style: none;
    text-align: center;
    font-size: 14px;
    color: hsl(0,0%,60%);
}
.WebKit ul {
    text-align: left;
}

li {
    padding: 5px 0;
}


/* Show Sprite Checkbox ------------------------------------------------------ */

.WebKit #show {
    -webkit-appearance: none;
    border-radius: 20px;
    width: 20px;
    height: 20px;
    margin: -2px 6px 0 0;
    vertical-align: middle;
    border: 10px solid hsl(0,0%,80%);
   ...

JavaScript

$(document).ready(function(){
    
    if ($.browser.webkit) {
        $('html').addClass('WebKit');
    }
    
    $('#show').change( function() {
        $('#animation').toggleClass('showRoll');
    });
    
    
    var labelSide = "right";
    
    $('#duration-input').change( function() {
        var val = $(this).val();
        var valRounded = Math.round( val * 10 ) / 10;
        var mid = $(this).attr('max')/2;
        $('#frame').css("animation-duration", val + "s" );
        $('#roll').css("animation-duration", val + "s" );
        $('#duration-label').text( valRounded );
        
        if(val > mid && labelSide == "right") {
            labelSide = "left";
            $('#duration-label').removeClass("isRight").addClass("isLeft");
        
        } else if(val <= mid && labelSide == "left") {
            labelSide = "right";
            $('#duration-label').removeClass("isLeft").addClass("isRight");
        }
    });
    
 });