Add Slider bars code

3 files changed, 42 insertions, 5 deletions

diff --git a/src/bars.less b/src/bars.less
index 193f9e4..a996142 100644
--- a/src/bars.less
+++ b/src/bars.less
@@ -36,3 +36,40 @@
     }
   }
 }
+
+// Slider bar
+.bar-slider {
+  height: .2rem;
+  margin: 1rem 0;
+  position: relative;
+
+  .bar-item {
+    left: 0;
+    padding: 0;
+    position: absolute;
+    &:not(:last-child):first-child {
+      background: @bg-color-dark;
+      z-index: @zindex-0;
+    }
+  }
+
+  .bar-slider-btn {
+    appearance: none;
+    background: @primary-color;
+    border: 0;
+    border-radius: 50%;
+    cursor: pointer;
+    height: 1.2rem;
+    padding: 0;
+    position: absolute;
+    right: 0;
+    top: 50%;
+    transform: translate(50%, -50%);
+    transition: all .2s ease;
+    width: 1.2rem;
+
+    &:active {
+      box-shadow: 0 0 0 .2rem @primary-color;
+    }
+  }
+}
diff --git a/src/parallax.less b/src/parallax.less
index 54335e7..6a6f03a 100644
--- a/src/parallax.less
+++ b/src/parallax.less
@@ -1,6 +1,6 @@
 // Parallax
 @parallax-deg: 3deg;
-@parallax-offset: .4rem;
+@parallax-offset: .65rem;
 @parallax-offset-z: 10rem;
 
 .parallax {
diff --git a/src/sliders.less b/src/sliders.less
index a2d9a2f..46d6b87 100644
--- a/src/sliders.less
+++ b/src/sliders.less
@@ -14,7 +14,7 @@
     border: 0;
     border-radius: 50%;
     height: 1.2rem;
-    margin-top: -.4rem;
+    margin-top: -.5rem;
     transition: transform .2s ease;
     width: 1.2rem;
   }
@@ -67,19 +67,19 @@
   &::-webkit-slider-runnable-track {
     background: @bg-color-dark;
     border-radius: @border-radius;
-    height: .4rem;
+    height: .2rem;
     width: 100%;
   }
   &::-moz-range-track {
     background: @bg-color-dark;
     border-radius: @border-radius;
-    height: .4rem;
+    height: .2rem;
     width: 100%;
   }
   &::-ms-track {
     background: @bg-color-dark;
     border-radius: @border-radius;
-    height: .4rem;
+    height: .2rem;
     width: 100%;
   }
   &::-ms-fill-lower {