Fixes for IE

assets/less/simple-media.less

@@ -21,7 +21,12 @@
 @progress-bg: 				@gray;
 @progress-value-bg: 		@blue;
 
-
+// Range
+@range-track-height: 		6px;
+@range-thumb-height: 		(@range-track-height * 2);
+@range-thumb-width: 		(@range-track-height * 2);
+@range-thumb-bg: 			@control-color;
+@range-thumb-bg-focus: 		@control-color-active;
 
 // Utility classes & mixins
 // -------------------------------
@@ -49,6 +54,24 @@
 	outline-offset: 1px;
 }
 
+
+// Range styling
+// ---------------------------------------
+.range-thumb() {
+	height: @range-thumb-height;
+	width: @range-thumb-width;
+	background: @range-thumb-bg;
+	border: 0;
+	border-radius: (@range-thumb-height / 2);
+	transition: background .3s ease;
+}
+.range-track() {
+	height: @range-track-height;
+	background: @gray;
+	border: 0;
+	border-radius: (@range-track-height / 2);
+}
+
 // Font smoothing
 // ---------------------------------------
 .font-smoothing(@mode: on) when (@mode = on) {
@@ -190,6 +213,7 @@
 	}
 
 	// Player progress
+	// <progress> element
 	&-progress {
 		position: absolute;
 		top: 0;
@@ -239,44 +263,63 @@
 	}
 
 	// Volume control
+	// <input[type='range']> element
 	&-volume {
+		vertical-align: middle;
 		-webkit-appearance: none;
-		height: 6px;
+		-moz-appearance: none;
+		//height: 6px;
 		width: 100px;
-		margin-right: @control-spacing;
+		margin: 0 @control-spacing 0 0;
-		background: @gray;
+		padding: 0;		
-		border-radius: 10px;
+		cursor: pointer;
+		background: none;
 		
-		&::-moz-range-track {
+		// Webkit
-			-moz-appearance: none;
+		&::-webkit-slider-runnable-track {
-			height: 6px;
+			.range-track();
-			background: @gray;
-			border: 0;
-			border-radius: 10px;
 		}
 		&::-webkit-slider-thumb {
-			-webkit-appearance: none !important;
+			-webkit-appearance: none;
-			height: 12px;
+			margin-top: -((@range-thumb-height - @range-track-height) / 2);
-			width: 12px;
+			.range-thumb();
-			background: @control-color;
+		}
-			border-radius: 100%;
+
-			transition: background .3s ease;
+		// Mozilla
+		&::-moz-range-track {
+			.range-track();
 		}
 		&::-moz-range-thumb {
-			height: 12px;
+			.range-thumb();
-			width: 12px;
-			border: 0;
-			background: @control-color;
-			border-radius: 100%;
 		}
+		
+		// Microsoft
+		&::-ms-track {
+			height: @range-track-height;
+			background: transparent;
+			border-color: transparent;
+			border-width: ((@range-thumb-height - @range-track-height) / 2) 0;
+			color: transparent;
+		}
+		&::-ms-fill-lower,
+		&::-ms-fill-upper {
+			.range-track();
+		}
+		&::-ms-thumb {
+			.range-thumb();
+		}
+
 		&:focus {
 			outline: 0;
 
 			&::-webkit-slider-thumb {
-				background: @control-color-active;
+				background: @range-thumb-bg-focus;
 			}
 			&::-moz-range-thumb {
-				background: @control-color-active;
+				background: @range-thumb-bg-focus;
+			}
+			&::-ms-thumb {
+				background: @range-thumb-bg-focus;
 			}
 		}
 	}
@@ -315,8 +358,8 @@
 	.video-controls .player-volume {
 		position: relative;
 		padding: 0;
-		height: 8px;
+		//height: 8px;
-		top: -3px;
+		//top: -3px;
 	}
 	.player-time {
 		margin-top: 4px;