diff --git a/css/_mixins.scss b/css/_mixins.scss
index d28e4504b..27795c8f4 100644
--- a/css/_mixins.scss
+++ b/css/_mixins.scss
@@ -2,52 +2,52 @@
  * Animation mixin.
  */
 @mixin animation($animate...) {
-  $max: length($animate);
-  $animations: '';
+    $max: length($animate);
+    $animations: '';
 
-  @for $i from 1 through $max {
-    $animations: #{$animations + nth($animate, $i)};
+    @for $i from 1 through $max {
+        $animations: #{$animations + nth($animate, $i)};
 
-    @if $i < $max {
-      $animations: #{$animations + ", "};
+        @if $i < $max {
+            $animations: #{$animations + ", "};
+        }
     }
-  }
-  -webkit-animation: $animations;
-  -moz-animation:    $animations;
-  -o-animation:      $animations;
-  animation:         $animations;
+    -webkit-animation: $animations;
+    -moz-animation:    $animations;
+    -o-animation:      $animations;
+    animation:         $animations;
 }
 
 @mixin flex() {
-  display: -webkit-box;
-  display: -moz-box;
-  display: -ms-flexbox;
-  display: -webkit-flex;
-  display: flex;
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
 }
 
 /**
  * Keyframes mixin.
  */
 @mixin keyframes($animationName) {
-  @-webkit-keyframes #{$animationName} {
-    @content;
-  }
-  @-moz-keyframes #{$animationName} {
-    @content;
-  }
-  @-o-keyframes #{$animationName} {
-    @content;
-  }
-  @keyframes #{$animationName} {
-    @content;
-  }
+    @-webkit-keyframes #{$animationName} {
+        @content;
+    }
+    @-moz-keyframes #{$animationName} {
+        @content;
+    }
+    @-o-keyframes #{$animationName} {
+        @content;
+    }
+    @keyframes #{$animationName} {
+        @content;
+    }
 }
 
 @mixin circle($diameter) {
-  width: $diameter;
-  height: $diameter;
-  border-radius: 50%;
+    width: $diameter;
+    height: $diameter;
+    border-radius: 50%;
 }
 
 /**
@@ -60,10 +60,10 @@
 }
 
 @mixin absoluteAligning() {
-  top: 50%;
-  left: 50%;
-  position: absolute;
-  @include transform(translate(-50%, -50%));
+    top: 50%;
+    left: 50%;
+    position: absolute;
+    @include transform(translate(-50%, -50%));
 }
 
 /**
@@ -75,81 +75,115 @@
 }
 
 @mixin transform($func) {
-  -moz-transform: $func;
-  -ms-transform: $func;
-  -webkit-transform: $func;
-  -o-transform: $func;
-  transform: $func;
+    -moz-transform: $func;
+    -ms-transform: $func;
+    -webkit-transform: $func;
+    -o-transform: $func;
+    transform: $func;
 }
 
 @mixin transition($transition...) {
-  -moz-transition:    $transition;
-  -o-transition:      $transition;
-  -webkit-transition: $transition;
-  transition:         $transition;
+    -moz-transition:    $transition;
+    -o-transition:      $transition;
+    -webkit-transition: $transition;
+    transition:         $transition;
 }
 
 /**
-* Mixin styling placeholder
-**/
+ * Mixin styling a placeholder.
+ **/
 @mixin placeholder() {
-  $selectors: (
-          "::-webkit-input-placeholder",
-          "::-moz-placeholder",
-          ":-moz-placeholder",
-          ":-ms-input-placeholder"
-  );
+    $selectors: (
+        "::-webkit-input-placeholder",
+        "::-moz-placeholder",
+        ":-moz-placeholder",
+        ":-ms-input-placeholder"
+    );
 
-  @each $selector in $selectors {
-    #{$selector} {
-      @content;
+    @each $selector in $selectors {
+        #{$selector} {
+            @content;
+        }
     }
+}
+
+/**
+ * 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;
-    -moz-box-shadow: inset $h $y $blur $color;
-    box-shadow: inset $h $y $blur $color;
-  } @else {
-    -webkit-box-shadow: $h $y $blur $color;
-    -moz-box-shadow: $h $y $blur $color;
-    box-shadow: $h $y $blur $color;
-  }
+    @if $inset {
+        -webkit-box-shadow: inset $h $y $blur $color;
+        -moz-box-shadow: inset $h $y $blur $color;
+        box-shadow: inset $h $y $blur $color;
+    } @else {
+        -webkit-box-shadow: $h $y $blur $color;
+        -moz-box-shadow: $h $y $blur $color;
+        box-shadow: $h $y $blur $color;
+    }
 }
 
 @mixin no-box-shadow {
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
+    -webkit-box-shadow: none;
+    -moz-box-shadow: none;
+    box-shadow: none;
 }
 
 @mixin box-sizing($box-model) {
-  -webkit-box-sizing: $box-model; // Safari <= 5
-     -moz-box-sizing: $box-model; // Firefox <= 19
-          box-sizing: $box-model;
+    -webkit-box-sizing: $box-model; // Safari <= 5
+    -moz-box-sizing: $box-model; // Firefox <= 19
+    box-sizing: $box-model;
 }
 
 @mixin border-radius($radius) {
-  -webkit-border-radius: $radius;
-  border-radius: $radius;
-  /* stops bg color from leaking outside the border: */
-  background-clip: padding-box;
+    -webkit-border-radius: $radius;
+    border-radius: $radius;
+    /* stops bg color from leaking outside the border: */
+    background-clip: padding-box;
 }
 
 @mixin opacity($opacity) {
-  opacity: $opacity;
-  $opacity-ie: $opacity * 100;
-  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=$opacity-ie);
-  filter: alpha(opacity=$opacity-ie); //IE8
+    opacity: $opacity;
+    $opacity-ie: $opacity * 100;
+    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=$opacity-ie);
+    filter: alpha(opacity=$opacity-ie); //IE8
 }
 
 @mixin text-truncate {
-  display: block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 /**
@@ -157,5 +191,5 @@
  * (opacity) value.
  */
 @mixin transparentBg($color, $alpha) {
-  background-color: rgba(red($color), green($color), blue($color), $alpha);
+    background-color: rgba(red($color), green($color), blue($color), $alpha);
 }
\ No newline at end of file
diff --git a/css/components/_input-slider.scss b/css/components/_input-slider.scss
new file mode 100644
index 000000000..2f28a88e2
--- /dev/null
+++ b/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;
+}
diff --git a/css/main.scss b/css/main.scss
index eb3915af4..f8afad43d 100644
--- a/css/main.scss
+++ b/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';
diff --git a/css/themes/_light.scss b/css/themes/_light.scss
index d49e5d0b8..95210cc13 100644
--- a/css/themes/_light.scss
+++ b/css/themes/_light.scss
@@ -8,6 +8,8 @@ $baseLight: #FFFFFF;
 */
 $controlBackground: $baseLight;
 $controlColor: #333333;
+$sliderTrackBackground: #474747;
+$sliderThumbBackground: #3572b0;
 
 /**
 * Buttons