Feature/range slider improvement (#44)

* add icon, bug fix * bug fixes * bump version * improvement on range slider --------- Co-authored-by: sabrefoxx <[email protected]>
Reloadly · Dec 8, 2023 · 132808d · 132808d
1 parent 0a9f336
commit 132808d
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 39 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "reloadly-ui",
-    "version": "0.0.1-beta.53",
+    "version": "0.0.1-beta.54",
     "description": "Angular UI library",
     "repository": {
         "type": "git",

diff --git a/src/lib/form/range-slider/range-slider.component.html b/src/lib/form/range-slider/range-slider.component.html
@@ -1,18 +1,19 @@
-<div class="range-slider" [class.disabled]="disabled">
-    <p class="min-max min" [ngStyle]="{'font-size': fontSize}">{{formattedMin}}</p>
-    <div class="rail-container">
-        <div class="rail" #range>
+<div class="rld-range-slider" [class.rld-disabled]="disabled">
+    <p class="rld-min-max rld-min" [ngStyle]="{'font-size': fontSize}">{{formattedMin}}</p>
+    <div class="rld-rail-container">
+        <input reloadlyInput #input type="number" [min]="min" [max]="max" class="rld-range-input"
+               (input)="inputChanged($event)" size="small"
+               [ngStyle]="{'display': showInput ? 'flex' : 'none'}" [disabled]="disabled">
+        <div class="rld-rail" #range>
             <ng-container *ngIf="showLabel">
-                <a class="knob" #knob [reloadly-tooltip]="formattedValue" [position]="'top-center'"
-                   reloadly-tooltip-color="rgb(40,40,40)"></a>
+                <a class="rld-knob" #knob [reloadly-tooltip]="formattedValue"
+                   [position]="'top-center'" reloadly-tooltip-color="rgb(40,40,40)"></a>
             </ng-container>
             <ng-container *ngIf="!showLabel">
-                <a class="knob" #knob></a>
+                <a class="rld-knob" #knob></a>
             </ng-container>
-            <div class="slide"></div>
+            <div class="rld-slide"></div>
         </div>
     </div>
-    <p class="min-max max" [ngStyle]="{'font-size': fontSize}">{{formattedMax}}</p>
-    <input [ngStyle]="{'display': showInput ? 'flex': 'none'}" #input type="number" [min]="min"
-           [max]="max" class="input" (input)="inputChanged($event)" [disabled]="disabled">
+    <p class="rld-min-max rld-max" [ngStyle]="{'font-size': fontSize}">{{formattedMax}}</p>
 </div>
diff --git a/src/lib/form/range-slider/range-slider.component.scss b/src/lib/form/range-slider/range-slider.component.scss
@@ -3,14 +3,17 @@
 
 $thickness: 22px;
 
-.range-slider {
-    display: flex;
+.rld {
+    &-range-slider {
+        display: flex;
+        align-items: flex-end;
 
-    * {
-        user-select: none;
+        * {
+            user-select: none;
+        }
     }
 
-    .rail {
+    &-rail {
         width: 100%;
         position: relative;
         min-height: $thickness;
@@ -22,26 +25,28 @@ $thickness: 22px;
 
         &-container {
             position: relative;
-            display: flex;
             flex-basis: 72%;
             flex-grow: 1;
             min-height: $thickness;
             overflow-x: hidden;
+            display: flex;
             flex-direction: column;
-            justify-content: center;
+            justify-content: flex-end;
+            align-items: center;
             padding: 0 math.div($thickness, 4);
+            padding-top: $box-halo-width;
         }
     }
 
-    .slide {
+    &-slide {
         width: 100%;
         height: 10px;
         background: $reloadly-light-blue;
         border: none;
         border-radius: $input-radius * 2;
     }
 
-    .knob {
+    &-knob {
         display: block;
         position: absolute;
         left: 0px;
@@ -51,41 +56,39 @@ $thickness: 22px;
         background-color: darken($color: $reloadly-light-blue, $amount: 15);
     }
 
-    .input {
-        max-width: 120px;
-        flex-basis: 20%;
-        flex-shrink: 1;
-        margin-left: $spacing-8;
+    &-range-input {
+        max-width: 80px;
+        margin-bottom: 2px;
     }
 
-    .min-max {
+    &-min-max {
         flex-basis: 4%;
         display: inline-flex;
-        align-self: center;
-        padding: 5px;
+        padding: 0 5px;
         font-weight: 450;
         user-select: none;
+        line-height: 1;
 
-        &.min {
+        &-min {
             padding-left: 0;
         }
 
-        &.max {
+        &-max {
             padding-right: 0;
         }
     }
 
-    &.disabled {
-        .slide {
+    &-disabled {
+        .rld-slide {
             background-color: $reloadly-disabled-color;
         }
 
-        .knob {
+        .rld-knob {
             background-color: darken($color: $reloadly-disabled-color, $amount: 5);
             cursor: not-allowed;
         }
 
-        .input {
+        .rld-input {
             background-color: $reloadly-disabled-color;
             border: 0;
             box-shadow: none;

diff --git a/src/styles/forms.scss b/src/styles/forms.scss
@@ -42,7 +42,7 @@ form {
     font-size: $font-size-s;
     line-height: 20px;
     transition: all ease 0.4s;
-    box-shadow: 0px 0px 0px 3px transparent;
+    box-shadow: 0px 0px 0px $box-halo-width transparent;
     align-items: center;
 
     &::placeholder {
@@ -51,7 +51,7 @@ form {
 
     &:focus {
         border: 1px solid $border-color;
-        box-shadow: 0px 0px 0px 3px rgba(58, 151, 212, 0.36);
+        box-shadow: 0px 0px 0px $box-halo-width rgba(58, 151, 212, 0.36);
     }
 
     &:disabled, &[disabled] {

diff --git a/src/styles/variables.scss b/src/styles/variables.scss
@@ -53,6 +53,7 @@ $border-radius-l: 16px;
 $border-radius-md: 10px;
 $box-bg-color: #f2f4f8;
 $box-shadow: 0px 2px 5px rgba(60, 66, 87, 0.12), 0px 1px 1px rgba(0, 0, 0, 0.08);
+$box-halo-width: 3px;
 $brand-color: $reloadly-violet;
 $card-border: 1px solid #d5d9e0;
 $header-height: 38px;