From ed1de3abb2d386b7ab5dae275063a9a4777ee9b0 Mon Sep 17 00:00:00 2001
From: Caleb Zearing <czearing@outlook.com>
Date: Thu, 2 Sep 2021 19:24:46 -0700
Subject: [PATCH] (react-slider) - Addressing a visual bug related to origin
 and snapping (#19631)

* Fixing bugs

* Updating fix

* Cleaning up code

* Quick fix

* Cleaning up code
---
 .../src/components/Slider/useSliderState.tsx  | 25 +++++++++++++------
 1 file changed, 18 insertions(+), 7 deletions(-)

diff --git a/packages/react-slider/src/components/Slider/useSliderState.tsx b/packages/react-slider/src/components/Slider/useSliderState.tsx
index 308841771b002..f7de0f1eb1c9a 100644
--- a/packages/react-slider/src/components/Slider/useSliderState.tsx
+++ b/packages/react-slider/src/components/Slider/useSliderState.tsx
@@ -229,7 +229,7 @@ export const useSliderState = (state: SliderState) => {
   );
 
   const getTrackBorderRadius = () => {
-    if (origin && origin !== (max || min)) {
+    if (origin !== undefined && origin !== (max || min)) {
       if (vertical) {
         return originPercent > valuePercent ? '99px 99px 0px 0px' : '0px 0px 99px 99px';
       } else {
@@ -252,7 +252,7 @@ export const useSliderState = (state: SliderState) => {
   const valuePercent = getPercent(renderedPosition !== undefined ? renderedPosition : currentValue, min, max);
 
   const originPercent = React.useMemo(() => {
-    return origin ? getPercent(origin, min, max) : 0;
+    return origin !== undefined ? getPercent(origin, min, max) : 0;
   }, [max, min, origin]);
 
   const markValues = React.useMemo((): number[] => {
@@ -300,13 +300,24 @@ export const useSliderState = (state: SliderState) => {
   };
 
   const trackStyles = {
-    [vertical ? 'top' : dir === 'rtl' ? 'right' : 'left']: origin ? `${Math.min(valuePercent, originPercent)}%` : 0,
-    [vertical ? 'height' : 'width']: origin
-      ? `${Math.max(originPercent - valuePercent, valuePercent - originPercent)}%`
-      : `${valuePercent}%`,
+    [vertical ? 'top' : dir === 'rtl' ? 'right' : 'left']:
+      origin !== undefined ? `${Math.min(valuePercent, originPercent)}%` : 0,
+    [vertical ? 'height' : 'width']:
+      origin !== undefined
+        ? `${Math.max(originPercent - valuePercent, valuePercent - originPercent)}%`
+        : `${valuePercent}%`,
     borderRadius: getTrackBorderRadius(),
+    // When a transition is applied with the origin, a visible animation plays when it goes below the min.
     transition: stepAnimation
-      ? `transform ease-in-out ${animationTime}, ${vertical ? 'height' : 'width'} ease-in-out ${animationTime}`
+      ? `${vertical ? 'height' : 'width'} ease-in-out ${animationTime}${
+          origin !== undefined
+            ? ', ' + vertical
+              ? 'top'
+              : dir === 'rtl'
+              ? 'right'
+              : 'left' + 'ease-in-out ' + animationTime
+            : ''
+        }`
       : 'none',
     ...state.track.style,
   };