Update tests to use other numbers and fix small things

Author: iveysaur

src/components/slider/slider.scss

@@ -1,11 +1,12 @@
 @import 'default-theme';
 
-$slider-size: 20px !default;
+// This refers to the thickness of the slider. On a horizontal slider this is the height, on a
+// vertical slider this is the width.
+$slider-thickness: 20px !default;
 $slider-min-size: 128px !default;
 
 $slider-track-height: 2px !default;
-$slider-thumb-width: 20px !default;
-$slider-thumb-height: $slider-thumb-width !default;
+$slider-thumb-size: 20px !default;
 
 $slider-thumb-default-scale: 0.7 !default;
 $slider-thumb-focus-scale: 1 !default;
@@ -15,20 +16,26 @@ $slider-off-color: rgba(black, 0.26);
 $slider-focused-color: rgba(black, 0.38);
 $slider-disabled-color: rgba(black, 0.26);
 
-@function center-vertically($outerHeight, $innerHeight) {
-  @return ($outerHeight / 2) - ($innerHeight / 2);
+/**
+ * Uses a container height and an item height to center an item vertically within the container.
+ */
+@function center-vertically($containerHeight, $itemHeight) {
+  @return ($containerHeight / 2) - ($itemHeight / 2);
 }
 
-@mixin slider-thumb-position($width: $slider-thumb-width, $height: $slider-thumb-height) {
+/**
+ * Positions the thumb based on its width and height.
+ */
+@mixin slider-thumb-position($width: $slider-thumb-size, $height: $slider-thumb-size) {
   position: absolute;
-  top: center-vertically($slider-size, $height);
+  top: center-vertically($slider-thickness, $height);
   width: $width;
   height: $height;
   border-radius: max($width, $height);
 }
 
 md-slider {
-  height: $slider-size;
+  height: $slider-thickness;
   min-width: $slider-min-size;
   position: relative;
   padding: 0;
@@ -42,21 +49,29 @@ md-slider *::after {
   box-sizing: border-box;
 }
 
+/**
+ * Exists in order to pad the slider and keep everything positioned correctly.
+ * Cannot be merged with the .md-slider-container.
+ */
 .md-slider-wrapper {
   width: 100%;
   height: 100%;
   padding-left: 8px;
   padding-right: 8px;
 }
 
+/**
+ * Holds the isActive and isDragging classes as well as help with positioning the children.
+ * Cannot be merged with .md-slider-wrapper.
+ */
 .md-slider-container {
   position: relative;
 }
 
 .md-slider-track-container {
   width: 100%;
   position: absolute;
-  top: center-vertically($slider-size, $slider-track-height);
+  top: center-vertically($slider-thickness, $slider-track-height);
   height: $slider-track-height;
 }
 
@@ -92,17 +107,17 @@ md-slider *::after {
 .md-slider-thumb {
   z-index: 1;
 
-  @include slider-thumb-position($slider-thumb-width, $slider-thumb-height);
+  @include slider-thumb-position($slider-thumb-size, $slider-thumb-size);
   transform: scale($slider-thumb-default-scale);
   transition: transform 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
 }
 
 .md-slider-thumb::after {
   content: '';
   position: absolute;
-  width: $slider-thumb-width;
-  height: $slider-thumb-height;
-  border-radius: max($slider-thumb-width, $slider-thumb-height);
+  width: $slider-thumb-size;
+  height: $slider-thumb-size;
+  border-radius: max($slider-thumb-size, $slider-thumb-size);
   border-width: 3px;
   border-style: solid;
   transition: inherit;