iOS' slide to unlock feature made using HTML5 range

A-Pen-by-Anand-Chowdhary.markdown

iOS Slide to Unlock w/ HTML5 Range

A Pen by Anand Chowdhary on CodePen.

License.

index.html

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

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

script.js

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

style.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: "→";
}