Multithumb colors done

RocketChat · Sep 5, 2022 · c0af5f8 · c0af5f8
1 parent 2aa2984
commit c0af5f8
Showing 1 changed file with 17 additions and 13 deletions.
diff --git a/packages/fuselage/src/components/Slider/SliderTrack.tsx b/packages/fuselage/src/components/Slider/SliderTrack.tsx
@@ -34,35 +34,39 @@ export const SliderTrack = ({
   );
 
   const getThumbPosition = useMemo(
-    () => () => {
+    () => (value: number) => {
       if (minValue && maxValue) {
-        const result = (state.values[0] / (maxValue - minValue)) * 100;
-        console.log(result);
-        return result;
+        return (value / (maxValue - minValue)) * 100;
       }
       if (maxValue) {
-        const result = (state.values[0] / maxValue) * 100;
-        console.log(result);
-        return result;
+        return (value / maxValue) * 100;
       }
       if (minValue) {
-        return (state.values[0] / 100 - minValue) * 100;
+        return (value / 100 - minValue) * 100;
       }
-      return state.values[0];
+      return value;
     },
-    [maxValue, minValue, state.values]
+    [maxValue, minValue]
   );
 
   const getTrackGradient = () => {
     if (isHorizontal) {
       if (multiThumb) {
-        return `90deg, transparent ${getThumbPosition()}%, #156ff5 0%, transparent`;
+        return `to right, transparent ${getThumbPosition(
+          state.values[0]
+        )}%, #156ff5 0, #156ff5 ${getThumbPosition(
+          state.values[1]
+        )}%, transparent 0`;
       }
-      return `90deg, #156ff5  ${getThumbPosition()}%, transparent 0%`;
+      return `90deg, #156ff5  ${getThumbPosition(
+        state.values[0]
+      )}%, transparent 0%`;
     }
 
     if (isVertical) {
-      return `360deg, #156ff5  ${getThumbPosition()}%, transparent 0%`;
+      return `360deg, #156ff5  ${getThumbPosition(
+        state.values[0]
+      )}%, transparent 0%`;
     }
   };
   const track = useStyle(