JSFiddle - React, Tailwind, and code Playground

by yukirock

HTML

<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<img class="origin" src="http://mmbiz.qpic.cn/mmbiz/nYaPL73Wic1Hn92UAyVbo3Umjx2nspHR5viadBwEIjpciadupx5o2WXlXePao7jAUySSog0QoSX61EicOa1xAibpIgg/640">
<img class="cover" src="http://mmbiz.qpic.cn/mmbiz/nYaPL73Wic1Hn92UAyVbo3Umjx2nspHR5viadBwEIjpciadupx5o2WXlXePao7jAUySSog0QoSX61EicOa1xAibpIgg/640">
<div id="slider"></div>

CSS

.origin, .cover {
    position: absolute;
    top: 0;
    left: 0;
}

.cover {
    opacity: 0.5;
}

#slider {
    top: 580px;
    width: 600px;
}

JavaScript

function refreshSwatch() {
    var right = $( "#slider" ).slider( "value" );
    $( ".cover" ).css( "left", right );
}
$(function() {
    $( "#slider" ).slider({
        orientation: "horizontal",
        range: "min",
        max: 400,
        "value": 0,
        slide: refreshSwatch,
        change: refreshSwatch
    });
});