From ca58c7304c7c6a76a7b16d6785a1611ddb486ba0 Mon Sep 17 00:00:00 2001
From: Stefan Rimaila <stefan@rimaila.fi>
Date: Mon, 28 Oct 2019 14:22:21 +0200
Subject: [PATCH] feat(styles): form: add custom appearance to range slider

---
 src/styles/_form.scss | 52 +++++++++++++++++++++++++++++++++++++++----
 1 file changed, 48 insertions(+), 4 deletions(-)

diff --git a/src/styles/_form.scss b/src/styles/_form.scss
index 8e07084..26cba56 100644
--- 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 {