Add vertical multithumb to storybook

RocketChat · Sep 5, 2022 · 818af7f · 818af7f
1 parent c0af5f8
commit 818af7f
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 13 deletions.
diff --git 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
@@ -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(