From 818af7fc9b630121ff904131c1dc706685793b1e Mon Sep 17 00:00:00 2001
From: juliajforesti <juliajforesti@gmail.com>
Date: Mon, 5 Sep 2022 13:56:40 -0300
Subject: [PATCH] Add vertical multithumb to storybook

---
 .../src/components/Slider/Slider.stories.tsx  | 10 ++++++
 .../src/components/Slider/SliderTrack.tsx     | 31 +++++++++++--------
 2 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/packages/fuselage/src/components/Slider/Slider.stories.tsx b/packages/fuselage/src/components/Slider/Slider.stories.tsx
index 95f09238eb..7ab2b06e00 100644
--- a/packages/fuselage/src/components/Slider/Slider.stories.tsx
+++ b/packages/fuselage/src/components/Slider/Slider.stories.tsx
@@ -77,6 +77,16 @@ Vertical.args = {
   'orientation': 'vertical',
 } as const;
 
+export const VerticalMultiThumb: ComponentStory<typeof Slider> = Template.bind(
+  {}
+);
+VerticalMultiThumb.args = {
+  'label': 'Range',
+  'aria-label': 'range',
+  'orientation': 'vertical',
+  'multiThumb': true,
+} as const;
+
 export const VerticalSmall: ComponentStory<typeof Slider> = Template.bind({});
 VerticalSmall.args = {
   'aria-label': 'aria-range-label',
diff --git a/packages/fuselage/src/components/Slider/SliderTrack.tsx b/packages/fuselage/src/components/Slider/SliderTrack.tsx
index 3dce1dcca5..c4f5eb3c77 100644
--- a/packages/fuselage/src/components/Slider/SliderTrack.tsx
+++ b/packages/fuselage/src/components/Slider/SliderTrack.tsx
@@ -51,22 +51,27 @@ export const SliderTrack = ({
 
   const getTrackGradient = () => {
     if (isHorizontal) {
-      if (multiThumb) {
-        return `to right, transparent ${getThumbPosition(
-          state.values[0]
-        )}%, #156ff5 0, #156ff5 ${getThumbPosition(
-          state.values[1]
-        )}%, transparent 0`;
-      }
-      return `90deg, #156ff5  ${getThumbPosition(
-        state.values[0]
-      )}%, transparent 0%`;
+      return multiThumb
+        ? `to right, transparent ${getThumbPosition(
+            state.values[0]
+          )}%, #156ff5 0, #156ff5 ${getThumbPosition(
+            state.values[1]
+          )}%, transparent 0`
+        : `to right, #156ff5  ${getThumbPosition(
+            state.values[0]
+          )}%, transparent 0%`;
     }
 
     if (isVertical) {
-      return `360deg, #156ff5  ${getThumbPosition(
-        state.values[0]
-      )}%, transparent 0%`;
+      return multiThumb
+        ? `to top, transparent ${getThumbPosition(
+            state.values[0]
+          )}%, #156ff5 0, #156ff5 ${getThumbPosition(
+            state.values[1]
+          )}%, transparent 0`
+        : `to top, #156ff5  ${getThumbPosition(
+            state.values[0]
+          )}%, transparent 0%`;
     }
   };
   const track = useStyle(