feat(md-slider): initial version for md-slider (#779)

Author: iveysaur

src/components/slider/slider.html

@@ -0,0 +1,15 @@
+<div class="md-slider-wrapper">
+  <div class="md-slider-container"
+       [class.md-slider-dragging]="isDragging"
+       [class.md-slider-active]="isActive">
+    <div class="md-slider-track-container">
+      <div class="md-slider-track"></div>
+      <div class="md-slider-track md-slider-track-fill"></div>
+    </div>
+    <div class="md-slider-thumb-container">
+      <div class="md-slider-thumb-position">
+        <div class="md-slider-thumb"></div>
+      </div>
+    </div>
+  </div>
+</div>

src/components/slider/slider.scss

@@ -0,0 +1,143 @@
+@import 'default-theme';
+@import '_variables';
+
+// This refers to the thickness of the slider. On a horizontal slider this is the height, on a
+// vertical slider this is the width.
+$md-slider-thickness: 20px !default;
+$md-slider-min-size: 128px !default;
+$md-slider-padding: 8px !default;
+
+$md-slider-track-height: 2px !default;
+$md-slider-thumb-size: 20px !default;
+
+$md-slider-thumb-default-scale: 0.7 !default;
+$md-slider-thumb-focus-scale: 1 !default;
+
+// TODO(iveysaur): Find an implementation to hide the track under a disabled thumb.
+$md-slider-off-color: rgba(black, 0.26);
+$md-slider-focused-color: rgba(black, 0.38);
+$md-slider-disabled-color: rgba(black, 0.26);
+
+/**
+ * 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);
+}
+
+/**
+ * Positions the thumb based on its width and height.
+ */
+@mixin slider-thumb-position($width: $md-slider-thumb-size, $height: $md-slider-thumb-size) {
+  position: absolute;
+  top: center-vertically($md-slider-thickness, $height);
+  width: $width;
+  height: $height;
+  border-radius: max($width, $height);
+}
+
+md-slider {
+  height: $md-slider-thickness;
+  min-width: $md-slider-min-size;
+  position: relative;
+  padding: 0;
+  display: inline-block;
+  outline: none;
+  vertical-align: middle;
+}
+
+md-slider *,
+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: $md-slider-padding;
+  padding-right: $md-slider-padding;
+}
+
+/**
+ * Holds the isActive and isDragging classes as well as helps 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($md-slider-thickness, $md-slider-track-height);
+  height: $md-slider-track-height;
+}
+
+.md-slider-track {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 100%;
+  background-color: $md-slider-off-color;
+}
+
+.md-slider-track-fill {
+  transition-duration: $swift-ease-out-duration;
+  transition-timing-function: $swift-ease-out-timing-function;
+  transition-property: width, height;
+  background-color: md-color($md-accent);
+}
+
+.md-slider-thumb-container {
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translate3d(-50%, -50%, 0);
+  transition-duration: $swift-ease-out-duration;
+  transition-timing-function: $swift-ease-out-timing-function;
+  transition-property: left, bottom;
+}
+
+.md-slider-thumb-position {
+  transition: transform $swift-ease-out-duration $swift-ease-out-timing-function;
+}
+
+.md-slider-thumb {
+  z-index: 1;
+
+  @include slider-thumb-position($md-slider-thumb-size, $md-slider-thumb-size);
+  transform: scale($md-slider-thumb-default-scale);
+  transition: transform $swift-ease-out-duration $swift-ease-out-timing-function;
+}
+
+.md-slider-thumb::after {
+  content: '';
+  position: absolute;
+  width: $md-slider-thumb-size;
+  height: $md-slider-thumb-size;
+  border-radius: max($md-slider-thumb-size, $md-slider-thumb-size);
+  border-width: 3px;
+  border-style: solid;
+  transition: inherit;
+  background-color: md-color($md-accent);
+  border-color: md-color($md-accent);
+}
+
+.md-slider-dragging .md-slider-thumb-position,
+.md-slider-dragging .md-slider-track-fill {
+  transition: none;
+  cursor: default;
+}
+
+.md-slider-active .md-slider-thumb {
+  transform: scale($md-slider-thumb-focus-scale);
+}
+
+.md-slider-disabled .md-slider-thumb::after {
+  background-color: $md-slider-disabled-color;
+  border-color: $md-slider-disabled-color;
+}