JSFiddle - React, Tailwind, and code Playground

by ozzon91

HTML

<link rel="stylesheet" href="http://z4p.nl//static/wecast.it/css/style.css">
<div id="scherpStellen">
    <div id="inked-painted">
        <img src="//z4p.nl//static/wecast.it/gfx/screen1.jpg" id="inked" alt="">
        <div id="colored"></div>
    </div>
</div>

JavaScript

var inkbox = document.getElementById("inked-painted");
    var colorbox = document.getElementById("colored");
    var fillerImage = document.getElementById("inked");
    inkbox.addEventListener("mousemove",trackLocation,false);
    inkbox.addEventListener("touchstart",trackLocation,false);
    inkbox.addEventListener("touchmove",trackLocation,false);

function trackLocation(e) {
var rect = inked.getBoundingClientRect();
var position = ((e.pageX - rect.left) / inked.offsetWidth)*100;
if (position <= 100) { colorbox.style.width = position+"%"; }
}