Re-styles range inputs for Chrome and FF.

css/_mixins.scss

@@ -90,8 +90,8 @@
 }
 
 /**
-* Mixin styling placeholder
-**/
+ * Mixin styling a placeholder.
+ **/
 @mixin placeholder() {
   $selectors: (
           "::-webkit-input-placeholder",
@@ -107,6 +107,40 @@
   }
 }
 
+/**
+ * Mixin styling a slider track for different browsers.
+ **/
+@mixin slider() {
+  $selectors: (
+          "input[type=range]::-webkit-slider-runnable-track",
+          "input[type=range]::-moz-range-track",
+          "input[type=range]::-ms-track"
+  );
+
+  @each $selector in $selectors {
+    #{$selector} {
+      @content;
+    }
+  }
+}
+
+/**
+ * Mixin styling a slider thumb for different browsers.
+ **/
+@mixin slider-thumb() {
+  $selectors: (
+          "input[type=range]::-webkit-slider-thumb",
+          "input[type=range]::-moz-range-thumb",
+          "input[type=range]::-ms-thumb"
+  );
+
+  @each $selector in $selectors {
+    #{$selector} {
+      @content;
+    }
+  }
+}
+
 @mixin box-shadow($h, $y, $blur, $color, $inset: false) {
   @if $inset {
     -webkit-box-shadow: inset $h $y $blur $color;

css/components/_input-slider.scss

@@ -0,0 +1,41 @@
+/**
+ * Disable the default webkit styles for range inputs (sliders).
+ */
+input[type=range]{
+  -webkit-appearance: none;
+  background: none;
+}
+
+/**
+ * Disable the default focus styles for webkit range inputs (sliders).
+ */
+input[type=range]:focus {
+  outline: none;
+}
+
+/**
+ * Include the mixin for a range input style.
+ */
+@include slider {
+  background: $sliderTrackBackground;
+  border: none;
+  border-radius: 3px;
+  cursor: pointer;
+  height: 6px;
+  width: 100%;
+}
+
+/**
+ * Include the mixin for a range input thumb style.
+ */
+@include slider-thumb {
+  -webkit-appearance: none;
+  background: white;
+  border: 1px solid $sliderThumbBackground;
+  border-radius: 50%;
+  box-shadow: 0px 0px 1px $sliderThumbBackground;
+  cursor: pointer;
+  height: 14px;
+  margin-top: -4px;
+  width: 14px;
+}

css/main.scss

@@ -60,7 +60,8 @@
 @import 'components/link';
 @import 'shortcuts/main';
 @import 'components/button-control';
-@import 'components/_input-control.scss';
+@import 'components/input-control';
+@import 'components/input-slider';
 @import "modals/invite/invite";
 @import "connection-info";
 @import 'aui-components/dropdown';

css/themes/_light.scss

@@ -8,6 +8,8 @@ $baseLight: #FFFFFF;
 */
 $controlBackground: $baseLight;
 $controlColor: #333333;
+$sliderTrackBackground: #474747;
+$sliderThumbBackground: #3572b0;
 
 /**
 * Buttons