feat: style for the slider component (#357)

openlitedotdev · Aug 16, 2024 · a1c2462 · a1c2462
1 parent 8ef4683
commit a1c2462
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 23 deletions.
diff --git a/src/components/elements/slider/slider-range.tsx b/src/components/elements/slider/slider-range.tsx
@@ -6,10 +6,10 @@ import type { VariantProps } from '@/tailwind'
 export interface Comp extends React.ElementRef<typeof SliderPrimitive.Range> {}
 export interface Props extends React.ComponentPropsWithoutRef<typeof SliderPrimitive.Range>, VariantProps<typeof sliderRange> {}
 
-const SliderRange = React.forwardRef<Comp, Props>(({ className, background, ...props }, ref) => (
+const SliderRange = React.forwardRef<Comp, Props>(({ className, variant, ...props }, ref) => (
   <SliderPrimitive.Range
     ref={ref}
-    className={cn(sliderRange({ background }), className)}
+    className={cn(sliderRange({ variant }), className)}
     {...props}
   />
 ))

diff --git a/src/components/elements/slider/slider.tsx b/src/components/elements/slider/slider.tsx
@@ -8,25 +8,54 @@ import { cn, slider } from '@/tailwind'
 export interface Comp extends React.ElementRef<typeof SliderPrimitive.Root> {}
 export interface Props extends React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>,
   VariantProps<typeof slider> {
-  background?: 'error' | 'primary' | 'success' | 'warn' | null | undefined
+  variant?: 'error' | 'primary' | 'success' | 'warn' | null | undefined
   styles?: string
+  values?: boolean
 }
 
-const Slider = React.forwardRef<Comp, Props>(({ className, styles, background = 'primary', ...props }, ref) => (
-  <SliderPrimitive.Root
-    ref={ref}
-    className={cn(
-      slider(),
-      className,
-    )}
-    {...props}
-  >
-    <SliderTrack>
-      <SliderRange background={background} className={styles} />
-    </SliderTrack>
-    <SliderPrimitive.Thumb className={`block h-5 w-5 rounded-full border-2 border-${background} bg-${background} shadow-${background} ring-offset-${background} transition-colors focus-visible:outline-none focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50`} />
-  </SliderPrimitive.Root>
-))
+const Slider = React.forwardRef<Comp, Props>(({ className, styles, values = false, variant = 'primary', ...props }, ref) => {
+  const [value, setValue] = React.useState<number[]>(props.defaultValue || [0])
+
+  return (
+    <div className="w-full">
+      <SliderPrimitive.Root
+        ref={ref}
+        className={cn(
+          slider(),
+          className,
+        )}
+        {...props}
+        value={value}
+        onValueChange={newValue => setValue(newValue)}
+      >
+        <SliderTrack>
+          <SliderRange variant={variant} className={styles} />
+        </SliderTrack>
+        <SliderPrimitive.Thumb className="block size-6 flex justify-center rounded-full bg-white border shadow-medium transition-colors focus-visible:outline-none focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50">
+          {
+            values
+              ? (
+                  <p className="-mt-5">
+                    {value[0]}
+                  </p>
+                )
+              : ''
+          }
+        </SliderPrimitive.Thumb>
+      </SliderPrimitive.Root>
+      {
+        values
+          ? (
+              <div className="flex w-full justify-between mt-2">
+                <p className="text-black">{props.min ? props.min : 0}</p>
+                <p className="text-black">{props.max ? props.max : 100}</p>
+              </div>
+            )
+          : ''
+      }
+    </div>
+  )
+})
 
 Slider.displayName = SliderPrimitive.Root.displayName
 

diff --git a/src/plugins/components/slider.ts b/src/plugins/components/slider.ts
@@ -18,7 +18,7 @@ export const slider = cva('relative flex w-full touch-none select-none items-cen
  * @example
  * <Track className={styles()} />
  */
-export const sliderTrack = cva('relative h-2 w-full grow overflow-hidden rounded-full bg-default')
+export const sliderTrack = cva('relative h-1 w-full grow overflow-hidden rounded-full bg-default')
 
 /**
  * Range wrapper **Class Variants** component
@@ -28,17 +28,17 @@ export const sliderTrack = cva('relative h-2 w-full grow overflow-hidden rounded
  * @example
  * <Range className={styles()} />
  */
-export const sliderRange = cva('absolute h-full', {
+export const sliderRange = cva('absolute h-1', {
   variants: {
-    background: {
+    variant: {
       primary: 'bg-primary',
       success: 'bg-success',
       warn: 'bg-warn',
       error: 'bg-error',
     },
   },
   defaultVariants: {
-    background: 'primary',
+    variant: 'primary',
   },
 })
 
@@ -50,4 +50,4 @@ export const sliderRange = cva('absolute h-full', {
  * @example
  * <Thumb className={styles()} />
  */
-export const sliderThumb = cva('block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50')
+export const sliderThumb = cva('block size-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50')