From f12455e3ee7652e133ea48558a07b835cbc19068 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20Feij=C3=B3?= <lucas.portela@vtex.com.br>
Date: Wed, 13 Jul 2022 15:13:56 -0300
Subject: [PATCH] Fixes `PriceRange` track position

---
 .../src/molecules/PriceRange/PriceRange.tsx   | 56 +++++++++++--------
 1 file changed, 32 insertions(+), 24 deletions(-)

diff --git a/packages/ui/src/molecules/PriceRange/PriceRange.tsx b/packages/ui/src/molecules/PriceRange/PriceRange.tsx
index 07cbec5030..0c541ae7c7 100644
--- a/packages/ui/src/molecules/PriceRange/PriceRange.tsx
+++ b/packages/ui/src/molecules/PriceRange/PriceRange.tsx
@@ -64,30 +64,38 @@ const PriceRange = forwardRef<PriceRangeRefType | undefined, PriceRangeProps>(
           onEnd={onEnd}
           aria-label={ariaLabel}
           onChange={(value) => onChange?.(value)}
-          minValueLabelComponent={(minValue) => (
-            <Price
-              value={minValue}
-              variant={variant}
-              formatter={formatter}
-              style={{
-                position: 'absolute',
-                left: `calc(${minValue}% + (${8 - minValue * 0.2}px))`,
-              }}
-              data-price-range-value-label="min"
-            />
-          )}
-          maxValueLabelComponent={(maxValue) => (
-            <Price
-              formatter={formatter}
-              variant={variant}
-              value={maxValue}
-              style={{
-                position: 'absolute',
-                left: `calc(${maxValue}% + (${8 - maxValue * 0.2}px))`,
-              }}
-              data-price-range-value-label="max"
-            />
-          )}
+          minValueLabelComponent={(minValue) => {
+            const minPercent = (minValue / max.absolute) * 100
+
+            return (
+              <Price
+                value={minValue}
+                variant={variant}
+                formatter={formatter}
+                data-price-range-value-label="min"
+                style={{
+                  position: 'absolute',
+                  left: `calc(${minPercent}% + (${8 - minPercent * 0.2}px))`,
+                }}
+              />
+            )
+          }}
+          maxValueLabelComponent={(maxValue) => {
+            const maxPercent = (maxValue / max.absolute) * 100
+
+            return (
+              <Price
+                formatter={formatter}
+                variant={variant}
+                value={maxValue}
+                data-price-range-value-label="max"
+                style={{
+                  position: 'absolute',
+                  left: `calc(${maxPercent}% + (${8 - maxPercent * 0.2}px))`,
+                }}
+              />
+            )
+          }}
         />
       </div>
     )