Nicer sliders

src/scss/components/_player.scss

@@ -48,4 +48,30 @@
 			/* @include animate(10s); */
 		}
 	}
+}
+
+.volume-control {
+	position: relative;
+
+	a {
+		position: relative;
+		z-index: 99;
+	}
+
+	&:hover {
+		.slider-wrapper {
+			display: block;
+		}
+	}
+
+	.slider-wrapper {
+		display: none;
+		position: absolute;
+		bottom: 0;
+		left: -4px;
+		height: 80px;
+		padding: 5px 5px 35px 5px;
+		background: rgba(0,0,0,0.8);
+		z-index: 98;
+	}
 }

src/scss/global/_forms.scss

@@ -98,17 +98,61 @@ label {
 }
 
 .slider {
-	margin: 10px 0;
-	height: 5px;
 	position: relative;
-	background: rgba(255,255,255,0.3);
 	cursor: pointer;
 
-	.progress {
-		left: 0;
-		top: 0;
+	.track {
+		position: absolute;
+		background: rgba(255,255,255,0.3);
+		@include animate()
+
+		.progress {
+			position: absolute;
+			background: $turquoise;
+			pointer-events: none;
+			left: 0;
+		}
+	}
+
+	&.horizontal {
+		margin: 10px 0;
+		height: 20px;
+
+		.track {
+			height: 2px;
+			top: 9px;
+			right: 0;
+			left: 0;
+
+			.progress {
+				top: 0;
+				height: 100%;
+			}
+		}
+
+		&:hover {
+			.track {
+				top: 7px;
+				height: 6px;
+			}
+		}
+	}
+
+	&.vertical {
+		margin: 10px 0;
+		width: 20px;
 		height: 100%;
-		background: $turquoise;
-		pointer-events: none;
+
+		.track {
+			width: 2px;
+			top: 0;
+			bottom: 0;
+			left: 9px;
+
+			.progress {
+				bottom: 0;
+				width: 100%;
+			}
+		}
 	}
 }