diff --git a/app/styleguide/slider/_slider.scss b/app/styleguide/slider/_slider.scss
index d63de2c0..2bfdf263 100644
--- a/app/styleguide/slider/_slider.scss
+++ b/app/styleguide/slider/_slider.scss
@@ -2,7 +2,7 @@
 @import "../animation/animation";
 
 // Default Range Colors
-$default-range-bg-color: nth($secondaryPalette, 5);
+$default-range-bg-color: rgba(0, 0, 0, 0.26);
 $default-range-color: nth($primaryPalette, 6);
 
 input[type="range"] {
@@ -26,11 +26,11 @@ _:-ms-input-placeholder, :root input[type="range"] {
   -ms-appearance: none;
   // The thumb can't overflow the track or the rest of the control in IE, so we
   // need to make it tall enough to contain the largest version of the thumb.
-  height: 52px;
+  height: 32px;
   margin: 0;
 }
 
-// Since we need to specify a height of 52px in IE, we add a class here for a
+// Since we need to specify a height of 32px in IE, we add a class here for a
 // container that brings it back to a reasonable height.
 .Slider-IEContainer {
   height: 18px;
@@ -55,6 +55,13 @@ input[type=range]::-ms-tooltip {
 .Slider-container {
   position: relative;
   background: none;
+  display: flex;
+  flex-direction: row;
+  height: 18px;
+}
+
+.Slider-container > input[type="range"] {
+  align-self: center;
 }
 
 // This one sets up a flex box for the styled upper and lower portions of the
@@ -64,13 +71,15 @@ input[type=range]::-ms-tooltip {
   position: absolute;
   height: 2px;
   width: calc(100% - 52px);
-  top: 12px;
+  top: 50%;
+  left: 0;
   margin: 0 26px;
   z-index: -1;
   display: flex;
   overflow: hidden;
   border: 0;
   padding: 0;
+  transform: translate(0, -1px);
 }
 
 // This one styles the lower part of the slider track.
@@ -92,10 +101,8 @@ input[type=range]::-ms-tooltip {
   transition: left 0.18s $animation-curve-default
 }
 
-// Some CSS magic to apply some tweaks on Firefox only.
-_:-moz-tree-row(hover), .Slider-backgroundFlex {
-  top: 13px;
-}
+// Some CSS magic to disable track animations in Firefox, since the thumb
+// doesn't animate.
 _:-moz-tree-row(hover), .Slider-backgroundUpper {
   transition: none;
 }
@@ -118,8 +125,7 @@ input[type="range"]::-ms-track {
   color: transparent;
   height: 2px;
   width: 100%;
-  border-width: 25px 0;
-  border-color: transparent;
+  border: none;
 }
 
 input[type=range]::-ms-fill-lower {
@@ -127,8 +133,8 @@ input[type=range]::-ms-fill-lower {
   // Margin on -ms-track doesn't work right, so we use gradients on the fills.
   background: linear-gradient(to right,
                               transparent,
-                              transparent 25px,
-                              $default-range-color 25px,
+                              transparent 16px,
+                              $default-range-color 16px,
                               $default-range-color 0);
 }
 
@@ -137,8 +143,8 @@ input[type=range]::-ms-fill-upper {
   // Margin on -ms-track doesn't work right, so we use gradients on the fills.
   background: linear-gradient(to left,
                               transparent,
-                              transparent 25px,
-                              $default-range-bg-color 25px,
+                              transparent 16px,
+                              $default-range-bg-color 16px,
                               $default-range-bg-color 0);
 }
 
@@ -156,6 +162,7 @@ input[type="range"]::-webkit-slider-thumb {
   border: none;
   transition: transform 0.18s $animation-curve-default,
               border 0.18s $animation-curve-default,
+              box-shadow 0.18s $animation-curve-default,
               background 0.28s $animation-curve-default;
 }
 
@@ -172,29 +179,11 @@ input[type="range"]::-moz-range-thumb {
 }
 
 input[type="range"]:focus:not(:active)::-webkit-slider-thumb {
-  background: radial-gradient(circle closest-side,
-                              $default-range-color 0%,
-                              $default-range-color 24%,
-                              rgba($default-range-color, 0.5) 27%,
-                              rgba($default-range-color, 0.5) 65%,
-                              rgba($default-range-color, 0) 68%,
-                              rgba($default-range-color, 0) 94%,
-                              $default-range-color 96%,
-                              $default-range-color 100%);
-  transform: scale(4.166);
+  box-shadow: 0 0 0 10px rgba($default-range-color, 0.26);
 }
 
 input[type="range"]:focus:not(:active)::-moz-range-thumb {
-  background: radial-gradient(circle closest-side,
-                              $default-range-color 0%,
-                              $default-range-color 24%,
-                              rgba($default-range-color, 0.5) 27%,
-                              rgba($default-range-color, 0.5) 65%,
-                              rgba($default-range-color, 0) 68%,
-                              rgba($default-range-color, 0) 94%,
-                              $default-range-color 96%,
-                              $default-range-color 100%);
-  transform: scale(4.166);
+  box-shadow: 0 0 0 10px rgba($default-range-color, 0.26);
 }
 
 input[type="range"]:active::-webkit-slider-thumb {
@@ -210,12 +199,12 @@ input[type="range"]:active::-moz-range-thumb {
 }
 
 input[type="range"]::-ms-thumb {
-  width: 50px;
-  height: 50px;
+  width: 32px;
+  height: 32px;
   border: none;
   border-radius: 50%;
   background: $default-range-color;
-  transform: scale(0.24);
+  transform: scale(0.375);
   // -ms-thumb doesn't currently support transitions, but leaving this here in
   // case support ever gets added.
   transition: transform 0.18s $animation-curve-default,
@@ -223,20 +212,17 @@ input[type="range"]::-ms-thumb {
 }
 
 input[type="range"]:focus:not(:active)::-ms-thumb {
-  transform: scale(1);
   background: radial-gradient(circle closest-side,
-                              $default-range-color 0px,
-                              $default-range-color 6px,
-                              rgba($default-range-color, 0.5) 7px,
-                              rgba($default-range-color, 0.5) 18px,
-                              transparent 19px,
-                              transparent 24px,
-                              $default-range-color 25px);
+                              $default-range-color 0%,
+                              $default-range-color 37.5%,
+                              rgba($default-range-color, 0.26) 37.5%,
+                              rgba($default-range-color, 0.26) 100%);
+  transform: scale(1);
 }
 
 input[type="range"]:active::-ms-thumb {
   background: $default-range-color;
-  transform: scale(0.36);
+  transform: scale(0.5625);
 }
 
 
@@ -253,39 +239,23 @@ input[type="range"].zero::-moz-range-thumb {
 }
 
 input[type="range"].zero ~ .Slider-backgroundFlex > .Slider-backgroundUpper {
-  left: 5px;
+  left: 6px;
 }
 
 input[type="range"].zero:focus:not(:active)::-webkit-slider-thumb {
-  background: radial-gradient(circle closest-side,
-                              transparent 0%,
-                              transparent 16%,
-                              $default-range-bg-color 17%,
-                              $default-range-bg-color 24%,
-                              rgba($default-range-bg-color, 0.5) 27%,
-                              rgba($default-range-bg-color, 0.5) 65%,
-                              rgba($default-range-bg-color, 0) 68%,
-                              rgba($default-range-bg-color, 0) 94%,
-                              $default-range-bg-color 96%,
-                              $default-range-bg-color 100%);
-  border: none;
-  transform: scale(4.166);
+  border: 1.8px solid $default-range-bg-color;
+  transform: scale(1.33);
+  box-shadow: none;
 }
 
 input[type="range"].zero:focus:not(:active)::-moz-range-thumb {
-  background: radial-gradient(circle closest-side,
-                              transparent 0%,
-                              transparent 16%,
-                              $default-range-bg-color 17%,
-                              $default-range-bg-color 24%,
-                              rgba($default-range-bg-color, 0.5) 27%,
-                              rgba($default-range-bg-color, 0.5) 65%,
-                              rgba($default-range-bg-color, 0) 68%,
-                              rgba($default-range-bg-color, 0) 94%,
-                              $default-range-bg-color 96%,
-                              $default-range-bg-color 100%);
-  border: none;
-  transform: scale(4.166);
+  border: 1.8px solid $default-range-bg-color;
+  transform: scale(1.33);
+  box-shadow: none;
+}
+
+input[type="range"].zero:focus:not(:active) ~ .Slider-backgroundFlex > .Slider-backgroundUpper {
+  left: 8px;
 }
 
 input[type="range"].zero:active::-webkit-slider-thumb {
@@ -294,7 +264,7 @@ input[type="range"].zero:active::-webkit-slider-thumb {
 }
 
 input[type="range"].zero:active ~ .Slider-backgroundFlex > .Slider-backgroundUpper {
-  left: 8px;
+  left: 9px;
 }
 
 input[type="range"].zero:active::-moz-range-thumb {
@@ -311,21 +281,16 @@ input[type="range"].zero::-ms-thumb {
 }
 
 input[type="range"].zero:focus:not(:active)::-ms-thumb {
-  transform: scale(1);
+  transform: scale(0.5);
   background: radial-gradient(circle closest-side,
-                              transparent 0px,
-                              transparent 4px,
-                              $default-range-bg-color 5px,
-                              $default-range-bg-color 6px,
-                              rgba($default-range-bg-color, 0.5) 7px,
-                              rgba($default-range-bg-color, 0.5) 18px,
-                              transparent 19px,
-                              transparent 24px,
-                              $default-range-bg-color 25px);
+                              transparent 0%,
+                              transparent 75%,
+                              $default-range-bg-color 75%,
+                              $default-range-bg-color 100%);
 }
 
 input[type="range"].zero:active::-ms-thumb {
-  transform: scale(0.36);
+  transform: scale(0.5625);
   background: radial-gradient(circle closest-side,
                               transparent 0%,
                               transparent 77.78%,
@@ -341,10 +306,14 @@ input[type=range].zero::-ms-fill-upper {
   margin-left: 6px;
 }
 
-input[type=range].zero:active::-ms-fill-upper {
+input[type=range].zero:focus:not(:active)::-ms-fill-upper {
   margin-left: 8px;
 }
 
+input[type=range].zero:active::-ms-fill-upper {
+  margin-left: 9px;
+}
+
 
 /* **** Disabled **** */
 
@@ -394,14 +363,14 @@ input[type="range"].zero:disabled:active ~ .Slider-backgroundFlex > .Slider-back
 input[type="range"]:disabled:focus::-ms-thumb,
 input[type="range"]:disabled:active::-ms-thumb,
 input[type="range"]:disabled::-ms-thumb {
-  transform: scale(0.16);
+  transform: scale(0.25);
   background: $default-range-bg-color;
 }
 
 input[type="range"].zero:disabled:focus::-ms-thumb,
 input[type="range"].zero:disabled:active::-ms-thumb,
 input[type="range"].zero:disabled::-ms-thumb {
-  transform: scale(0.16);
+  transform: scale(0.25);
   background: radial-gradient(circle closest-side,
                               transparent 0%,
                               transparent 50%,