JSFiddle - React, Tailwind, and code Playground

HTML

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

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

CSS

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

body {
  background: #eee;
}

input[type="range"] {
  width: 320px;
  margin: 100px;
  background: -webkit-gradient(linear, 0 0, 0 bottom, from(#000), to(#1f1f1f));
  -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: -webkit-linear-gradient(top, #fafafa 0%, #dedede 50%, #cfcfcf 51%, #a3a3a3 100%);
  z-index: 1;
  width: 75px;
  position: relative;
  height: 50px;
}

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: #8a8a8a;
  position: absolute;
  left: 5px;
  top: -10px;
  z-index: 1;
  font-size: 56px;
  font-weight: bold;
  content: "→";
}

JavaScript

document.querySelector("input[type=\"range\"]").onmouseup = function() {
  var theRange = this.value;
  if (theRange >= 70) {
    document.querySelector("input[type=\"range\"]").value = 100;
    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";
}