initial commit.

styles/form-range.scss

@@ -0,0 +1,64 @@
+@import "vars";
+@import "mixins";
+
+.range-wrapper {
+  @include user-select(none);
+  display: inline-block;
+  position: relative;
+  width: 100%;
+  height: 26px;
+  padding-top: 24px;
+}
+
+input[type='range'] {
+  display: inline-block;
+  -webkit-appearance: none !important;
+  background-color: rgba(0,0,0,0.05);
+  height: 2px;
+  border-radius: $radius*10 !important;
+  outline: 0;
+  vertical-align: middle;
+  width: 100%;
+}
+
+input[type='range']::-webkit-slider-thumb {
+    background-color: $medium;
+    border-radius: $radius;
+    -webkit-appearance: none !important;
+    height:44px;
+    width:44px;
+    border-radius: 100%;
+    background-clip: content-box;
+    border: 13px solid transparent;
+
+    // &:after {
+    //   content: "100%";
+    //   display: block;      
+    // }
+    &:active{
+      background-color: $darker !important;
+    }
+}
+
+.output-wrapper {
+  position: absolute;
+  top: 0px;
+  left: 0px;  
+  right: 60px;
+  width: auto;
+}
+
+output { 
+  font-size: 11px;
+  line-height: 1;
+  background-clip: padding-box;
+  color: #999;
+  font-family: Avenir;
+  position: absolute;
+  display: inline-block;
+  top: 0;
+  right: 0;
+  pointer-events: none;
+  vertical-align: middle;
+  letter-spacing: 0.1em;
+}