JSFiddle - React, Tailwind, and code Playground

by Raul roa

HTML

<canvas id="canvas" width="300" height="200" tabindex='0' class="default">This browser or document mode doesn't support canvas</canvas>
<div class="slider" id="slider">
    <div class="bar"></div>
    <div id="knob" class="knob"></div>
</div>
<img id="image" style="display:none" src="http://s.mrroa.com/butterfly.png" />

CSS

canvas {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: white;
    border-radius: 25px;
    border: 1px solid #404040;
}
.slider {
    position: absolute;
    top: 115px;
    left: 85px;
    width: 152px;
    height: 52px;
}
.bar {
    position: relative;
    top: 30px;
    width: 152px;
    height: 2px;
    background-color: #404040;
}
.knob {
    position: relative;
    left: 0;
    border: 1px solid #404040;
    background-color: #c0c0c0;
    width: 50px;
    height: 50px;
    border-radius: 25px;
}

JavaScript

// Get the canvas element
                // 
                var canvas = document.getElementById('canvas');

                // Get a reference to the drawing context 
                // 
                var ctx = canvas.getContext('2d');

                // Get a reference to the slider div
                // 
                var slider = document.getElementById("slider");

                // Get a reference to the slider knob
                // 
                var knob = document.getElementById("knob");

                // Get a reference to the image
                // 
                var image = document.getElementById("image");

                var mouseIsDown = 0;
                var knobMid = knob.offsetWidth / 2;
                var margin = canvas.offsetLeft - 1;

                // Binding events
                // 
                slider.addEventListener("touchstart", function (event) {
                    touchXY(event);
                }, false);

                slider.addEventListener("touchmove", function (event) {
                    touchXY(event);
                }, false);

                slider.addEventListener("mousedown", function (event) {
                    mouseDown(event);
                }, false);

                slider.addEventListener("mousemove", function (event) {
                    mouseXY(event);
                }, false);

                slider.addEventListener("mouseup", function (event) {
                    mouseUp(event);
                }, false);

                slider.addEventListener("mouseleave", function (event) {
                    mouseUp(event);
                }, false);

                // Draw text
                // 
                textInit();
                showVal();


                function mouseDown(event) {
                    mouseIsDown = 1;
                    mouseXY(event);
                }

                function mouseUp(event) {
                    mouseIsDown = 0;
               ...