From f1b8ad6f9c8b12b559ab501e3495b68c595865f7 Mon Sep 17 00:00:00 2001
From: memoyil <2213635+memoyil@users.noreply.github.com>
Date: Wed, 12 May 2021 00:07:27 +0200
Subject: [PATCH] fix: Bunny slider progress width is too small when is
 leftmost and too big when is rightmost side

---
 .../pancake-uikit/src/components/Slider/Slider.tsx    | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/pancake-uikit/src/components/Slider/Slider.tsx b/packages/pancake-uikit/src/components/Slider/Slider.tsx
index fd1d84931..d420f9b1e 100644
--- a/packages/pancake-uikit/src/components/Slider/Slider.tsx
+++ b/packages/pancake-uikit/src/components/Slider/Slider.tsx
@@ -28,7 +28,16 @@ const Slider: React.FC<SliderProps> = ({
 
   const progressPercentage = (value / max) * 100;
   const isMax = value === max;
-  const progressWidth = isMax ? "calc(100% - 16px)" : `${progressPercentage}%`;
+  let progressWidth: string;
+  if (progressPercentage <= 10) {
+    progressWidth = `${progressPercentage + 0.5}%`;
+  } else if (progressPercentage >= 90) {
+    progressWidth = `${progressPercentage - 4}%`;
+  } else if (progressPercentage >= 60) {
+    progressWidth = `${progressPercentage - 2.5}%`;
+  } else {
+    progressWidth = `${progressPercentage}%`;
+  }
   const labelProgress = isMax ? "calc(100% - 12px)" : `${progressPercentage}%`;
   const displayValueLabel = isMax ? "MAX" : valueLabel;
   return (