fix(RangeSlider): Fix rail positioning

Royal-Navy · Nov 2, 2020 · 2a89fac · 2a89fac
1 parent a50a339
commit 2a89fac
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 14 deletions.
diff --git a/packages/css-framework/src/components/_range-slider.scss b/packages/css-framework/src/components/_range-slider.scss
@@ -16,7 +16,8 @@ $range-slider-above-thresholds: f.color("action", "500");
   > div {
     position: relative;
     width: 100%;
-    height: 38px;
+    height: 40px;
+    padding-top: 20px;
   }
 
   &.is-disabled {
@@ -43,26 +44,21 @@ $range-slider-above-thresholds: f.color("action", "500");
 }
 
 .rn-rangeslider__rail {
-  position: relative;
-  display: inline-block;
-  width: 100%;
-  height: 2px;
-  top: 0.3rem;
-}
-
-.rn-rangeslider__rail-outer {
   position: absolute;
+  top: calc(50% + 20px);
+  left: 0;
+  display: inline-block;
   width: 100%;
   height: 40px;
-  transform: translate(0%, -50%);
-  cursor: pointer;
+  transform: translateY(-100%);
 }
 
 .rn-rangeslider__rail-inner {
   position: absolute;
+  top: 50%;
   width: 100%;
   height: 2px;
-  transform: translate(0%, -50%);
+  transform: translateY(-50%);
   background-color: $range-slider-bg-colour;
   pointer-events: none;
 }

diff --git a/packages/react-component-library/src/components/RangeSlider/Slider.tsx b/packages/react-component-library/src/components/RangeSlider/Slider.tsx
@@ -99,8 +99,7 @@ export const RangeSlider: React.FC<RangeSliderProps> = ({
         <Rail>
           {({ getRailProps }) => (
             <div className="rn-rangeslider__rail">
-              <div className="rn-rangeslider__rail-outer" {...getRailProps()} />
-              <div className="rn-rangeslider__rail-inner" />
+              <div className="rn-rangeslider__rail-inner" {...getRailProps()} />
             </div>
           )}
         </Rail>