Zuckerberg Smile Slider

by iheartzucc

HTML

<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="style.css">
		<title>Zuckerberg Smile Slider</title>
		<meta charset="UTF-8">
	</head>
	<body>
		<h1 id="title">Zuckerberg Smile Slider</h1>
		<div id="frame"></div>
		<input type="range" min="0" max="19" value="0" id="slider">

		<script>
			document.getElementById('slider').oninput = function() {
    			document.getElementById('frame').style.backgroundPosition = (-this.value * 486) + "px"
			}
		</script>
	</body>
</html>

CSS

body {
	background: black;
	font-family: sans-serif;
}

#title {
	color: white;
	text-align: center;
	width: 100%;
	font-size: 50px;
	font-weight: lighter;
}

#frame {
	background-image: url('https://i.imgur.com/jGhpdVg.png');
	width: 486px;
	height: 454px;
	margin: 0 auto;
}

#slider {
	-webkit-appearance: none;
    appearance: none;
	width: 200px;
	margin: -40px auto 0 auto;
	display: block;
	color: green;
	outline: none;
	background: #575757;
	height: 5px;
	border-radius: 3px;
	opacity: 0.6;
	-webkit-transition: .3s;
    transition: opacity .3s;
}

#slider:hover {
	opacity: 1;
}

#slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 10px;
    height: 15px;
    background: white;
    cursor: pointer;
}

#slider::-moz-range-thumb {
    width: 10px;
    height: 15px;
    background: white;
    cursor: pointer;
}