fix(timeslider): show single slider when there is no main range (#691)

ubilabs · Oct 15, 2020 · 92ff0f7 · 92ff0f7
1 parent b0285b3
commit 92ff0f7
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/src/scripts/components/layers/time-slider/time-slider.styl b/src/scripts/components/layers/time-slider/time-slider.styl
@@ -79,6 +79,9 @@ compareThumb()
 .input::-ms-thumb
   thumb()
 
+.singleInput
+  height: 50px
+
 .compareInput::-webkit-slider-thumb
   compareThumb()
 
@@ -103,6 +106,9 @@ compareThumb()
   top: 50px
   transform: translate(0, 0)
 
+.singleOutput
+  top: 40px
+
 .playButton
   margin-top: emCalc(-21px)
   padding-right: 1em

diff --git a/src/scripts/components/layers/time-slider/time-slider.tsx b/src/scripts/components/layers/time-slider/time-slider.tsx
@@ -133,9 +133,9 @@ const TimeSlider: FunctionComponent<Props> = ({className = ''}) => {
 
   const inputStyles = cx(
     styles.input,
-    rangeMain && rangeCompare && styles.compareInput
+    rangeMain && rangeCompare && styles.compareInput,
+    !rangeMain && rangeCompare && styles.singleInput
   );
-
   const classes = cx(styles.timeSlider, className);
 
   return (
@@ -188,7 +188,11 @@ const TimeSlider: FunctionComponent<Props> = ({className = ''}) => {
 
           {rangeCompare && (
             <output
-              className={cx(styles.timeOutput, styles.timeOutputCompare)}
+              className={cx(
+                styles.timeOutput,
+                styles.timeOutputCompare,
+                !rangeMain && rangeCompare && styles.singleOutput
+              )}
               style={{
                 left: `${clampedLabelPosition}%`
               }}>