refactor: Add custom styling option to Slider component

PolGubau · Sep 22, 2024 · 4a4b05f · 4a4b05f
1 parent 186598b
commit 4a4b05f
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 4 deletions.
diff --git a/packages/ui/src/components/Slider/Slider.stories.tsx b/packages/ui/src/components/Slider/Slider.stories.tsx
@@ -5,6 +5,7 @@ import { Slider, type SliderProps } from "./Slider"
 
 export default {
   title: "Components/Slider",
+
   component: Slider,
   tags: ["autodocs"],
 } as Meta
@@ -43,3 +44,15 @@ export const Steps = () => {
 export const PreventedOverlap = () => {
   return <Slider defaultValue={[25, 75]} step={10} minStepsBetweenThumbs={1} />
 }
+export const Custom = () => {
+  return (
+    <Slider
+      classNames={{
+        track: "bg-green-300 overflow-hidden h-[30px]",
+        range: "bg-blue-400",
+        thumb:
+          "bg-blue-400 rounded-l-none border-2 ring-0 border-blue-400 ring-blue-700 h-[30px] w-[30px] group-hover:border-0 group-hover:h-[30px] group-hover:w-[30px]",
+      }}
+    />
+  )
+}
diff --git a/packages/ui/src/components/Slider/Slider.tsx b/packages/ui/src/components/Slider/Slider.tsx
@@ -12,6 +12,13 @@ import { SliderTheme } from "./theme"
 export interface SliderProps
   extends React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> {
   className?: string
+  tooltip?: boolean
+  classNames?: {
+    root?: string
+    track?: string
+    range?: string
+    thumb?: string
+  }
   color?: Colors
   theme?: DeepPartial<SliderTheme>
 }
@@ -23,6 +30,7 @@ const Slider = React.forwardRef<
   (
     {
       className,
+      classNames,
       color = ColorsEnum.primary,
       theme: customTheme = {},
       orientation = OrientationsEnum.horizontal,
@@ -53,7 +61,8 @@ const Slider = React.forwardRef<
         value={value}
         onValueChange={onChange}
         ref={ref}
-        className={cn(theme.base, className)}
+        data-testid="slider"
+        className={cn(theme.base, classNames?.root, className)}
         data-orientation={orientation}
         orientation={orientation}
         disabled={props.disabled}
@@ -63,11 +72,15 @@ const Slider = React.forwardRef<
         {/*  */}
         <SliderPrimitive.Track
           data-orientation={orientation}
-          className={cn(theme.track.base, theme.track[orientation])}
+          className={cn(
+            theme.track.base,
+            theme.track[orientation],
+            classNames?.track
+          )}
         >
           <SliderPrimitive.Range
             data-orientation={orientation}
-            className={cn(theme.range, `bg-${color}`)}
+            className={cn(theme.range, `bg-${color}`, classNames?.range)}
           />
         </SliderPrimitive.Track>
 
@@ -85,7 +98,11 @@ const Slider = React.forwardRef<
               onPointerUp={onDragEnd}
               aria-disabled={props.disabled}
               key={i}
-              className={cn(`border-${color} ring-${color}`, theme.thumb)}
+              className={cn(
+                `border-${color} ring-${color}`,
+                theme.thumb,
+                classNames?.thumb
+              )}
             />
           </Tooltip>
         ))}