feat(styles): form: add custom appearance to range slider

stuf · Oct 28, 2019 · ca58c73 · ca58c73
1 parent a3e580c
commit ca58c73
Showing 1 changed file with 48 additions and 4 deletions.
diff --git a/src/styles/_form.scss b/src/styles/_form.scss
@@ -1,19 +1,63 @@
+$field-border-radius: 4px !default;
+
+@mixin rangeThumb {
+  width: 1rem;
+  height: 1rem;
+  margin: -0.3rem 0 0;
+  border-radius: 50%;
+  background: #37adbf;
+  cursor: pointer;
+  border: 0;
+}
+
+@mixin rangeTrack {
+  width: 100%;
+  height: 6px;
+  border-radius: $field-border-radius;
+  cursor: pointer;
+  background-color: rgba(0, 0, 0, 0.15);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
+}
+
+//
+
 .formField {
   &__textInput {
     padding: $unit-1x;
-    border-radius: 4px;
-    // border: $input-border-normal;
+    border-radius: $field-border-radius;
     border: 0;
   }
 }
 
 .formField {
+  display: block;
+  width: 100%;
+
   &.--field {
-    // border: dashed 1px #f00;
+    border: dashed 1px #f00;
   }
 
   &.--range {
-    border: solid 1px #f00;
+    user-select: none;
+
+    input[type='range'] {
+      height: 1rem;
+      appearance: none;
+      background: transparent;
+
+      &:focus {
+        outline: none;
+      }
+
+      &::-webkit-slider-thumb {
+        -webkit-appearance: none; // needed again for Chrome & Safari
+        @include rangeThumb;
+      }
+
+      &::-webkit-slider-runnable-track {
+        @include rangeTrack;
+      }
+    }
   }
 
   &.--checkbox {