JSFiddle - React, Tailwind, and code Playground

HTML

<!--
    Anand Chowdhary
    http://www.anandchowdhary.com
-->

<input type="range" class="slideToUnlock" id="blueballs"value="0" max="100">

CSS

/* I've Webkit vendor-prefixed my CSS */

body {
    background: rgb(70, 189, 149);
}

input[type="range"] {
    width: 320px;
    margin: 100px;
    background: rgb(124, 209, 180);
    -webkit-appearance: none;
    border-radius: 10px;
    padding: 5px;
    transition: opacity 0.5s;
    position: relative;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border-radius: 10px;
    background: #fff;
    z-index: 1;
    width: 75px;
    position: relative;
    height: 55px;
}

/*input[type="range"]:before {
    content: "slide to unlock";
    color: #8a8a8a;
    position: absolute;
    left: 100px;
    top: 10px;
    z-index: 1;
    font-size: 32px;
}*/

input[type="range"]::-webkit-slider-thumb:before {
    color: rgb(70, 188, 149);
    position: absolute;
    left: 10px;
    top: -10px;
    z-index: 1;
    font-size: 56px;
    font-weight: bold;
    content: "→";
}

JavaScript

document.querySelector("input[type=\"range\"]").onmouseup = function() {
    

    var theRange = this.value;
   // var theName = this.
    var curElement = document.activeElement.id;
    var blueBalls = blueballs;
    
    alert(curElement);

    if(theRange == 100) {

        if(curElement.text==blueBalls.text){
        			unlock();

    }

		} else {
			document.init = setInterval(function() {
				if(document.querySelector("input[type=\"range\"]").value != 0) {
					document.querySelector("input[type=\"range\"]").value = theRange--;
				}
			}, 1);
		}
}

document.querySelector("input[type=\"range\"]").onmousedown = function() {
		clearInterval(document.init);
}

function unlock() {
    document.querySelector("input[type=\"range\"]").style.opacity = "0";
    setTimeout(function() {
        
    document.querySelector("input[type=\"range\"]").value = "0";    document.querySelector("input[type=\"range\"]").style.opacity = "1";
    }, 1000);
}