Splitting out mute, cleaning up mobile output controls

src/scss/components/_slider.scss

@@ -4,7 +4,7 @@
 	cursor: pointer;
 	height: 20px;
 
-	input[type="range"]{
+	&__input {
 		position: absolute;
 		top: 0;
 		left: 0;
@@ -30,7 +30,7 @@
 		}
 	}
 
-	.track {
+	&__track {
 		position: absolute;
 		background: rgba(0,0,0,0.2);
 		border-radius: 2px;
@@ -40,7 +40,7 @@
 		left: 0;
 		margin-top: -3px;
 
-		.progress {
+		&__progress {
 			position: absolute;
 			background: $turquoise;
 			pointer-events: none;
@@ -66,8 +66,9 @@
 		}
 	}
 
-	&.disabled {
-		.progress {
+	&--disabled,
+	&--muted {
+		.slider__track__progress {
 			background: $mid_grey;
 
 			&:after {
@@ -77,8 +78,8 @@
 	}
 
 	&:hover {
-		.track {
-			.progress {
+		.slider__track {
+			&__progress {
 				&:after {
 					width: 12px;
 					height: 12px;