From 05299e31ab990794f7aa80e445cb3847d4226c4f Mon Sep 17 00:00:00 2001
From: Diana Fulga <diana.fulga@breakointit.eu>
Date: Tue, 23 Jan 2024 10:39:34 +0200
Subject: [PATCH 1/3] Slider

---
 src/components/slider.tsx | 55 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 src/components/slider.tsx

diff --git a/src/components/slider.tsx b/src/components/slider.tsx
new file mode 100644
index 00000000..54830adb
--- /dev/null
+++ b/src/components/slider.tsx
@@ -0,0 +1,55 @@
+import React, { forwardRef } from 'react'
+
+import { cn } from '@/utils/cn'
+
+export interface SliderProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  errorMessage?: string
+  disabled?: boolean
+  icon?: React.ReactNode
+  min?: number
+  max?: number
+  value?: number
+  defaultValue?: number
+}
+
+export const Slider = forwardRef<HTMLInputElement, SliderProps>(function Slider(
+  { errorMessage, defaultValue, value, disabled, ...props },
+  ref,
+) {
+  const [innerValue, setInnerValue] = React.useState<number>(value || defaultValue || 0)
+
+  return (
+    <div className="w-100">
+      <input
+        ref={ref}
+        type="range"
+        className={cn(
+          `[&::-webkit-slider-thumb]:appearance-none
+        [&::-webkit-slider-thumb]:w-5
+        [&::-webkit-slider-thumb]:h-5
+        [&::-webkit-slider-thumb]:bg-switch-base
+        [&::-webkit-slider-thumb]:rounded-full
+        [&::-moz-range-thumb]:appearance-none
+        [&::-moz-range-thumb]:w-5
+        [&::-moz-range-thumb]:h-5
+        [&::-moz-range-thumb]:bg-switch-base
+        [&::-moz-range-thumb]:rounded-full
+        w-full h-1 bg-disabled-strong rounded-lg appearance-none cursor-pointer dark:bg-disabled-strong`,
+          innerValue === 0 &&
+            '[&::-webkit-slider-thumb]:bg-disabled-strong [&::-moz-range-thumb]:bg-disabled-strong',
+        )}
+        disabled={disabled ?? false}
+        aria-disabled={disabled ?? false}
+        aria-invalid={!!errorMessage}
+        aria-describedby={errorMessage}
+        defaultValue={defaultValue}
+        value={innerValue}
+        onChange={e => setInnerValue(Number(e.target.value))}
+        {...props}
+      />
+      {innerValue}
+
+      {errorMessage && <p className="text-error text-sm px-2">{errorMessage}</p>}
+    </div>
+  )
+})

From 4809f134aa18cea42b5f2a1cd272591a42819c65 Mon Sep 17 00:00:00 2001
From: Diana Fulga <diana.fulga@breakointit.eu>
Date: Tue, 23 Jan 2024 10:43:27 +0200
Subject: [PATCH 2/3] Remove text

---
 src/components/slider.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/slider.tsx b/src/components/slider.tsx
index 54830adb..503e2602 100644
--- a/src/components/slider.tsx
+++ b/src/components/slider.tsx
@@ -47,7 +47,6 @@ export const Slider = forwardRef<HTMLInputElement, SliderProps>(function Slider(
         onChange={e => setInnerValue(Number(e.target.value))}
         {...props}
       />
-      {innerValue}
 
       {errorMessage && <p className="text-error text-sm px-2">{errorMessage}</p>}
     </div>

From 6cc094faa0df3dde6329101ae5d7a8d0bab7d806 Mon Sep 17 00:00:00 2001
From: Diana Fulga <diana.fulga@breakointit.eu>
Date: Thu, 25 Jan 2024 12:26:55 +0200
Subject: [PATCH 3/3] Add className for external customization

---
 src/components/slider.tsx | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/components/slider.tsx b/src/components/slider.tsx
index 503e2602..2e8b454f 100644
--- a/src/components/slider.tsx
+++ b/src/components/slider.tsx
@@ -13,7 +13,7 @@ export interface SliderProps extends React.InputHTMLAttributes<HTMLInputElement>
 }
 
 export const Slider = forwardRef<HTMLInputElement, SliderProps>(function Slider(
-  { errorMessage, defaultValue, value, disabled, ...props },
+  { errorMessage, defaultValue, value, className, disabled, ...props },
   ref,
 ) {
   const [innerValue, setInnerValue] = React.useState<number>(value || defaultValue || 0)
@@ -23,8 +23,9 @@ export const Slider = forwardRef<HTMLInputElement, SliderProps>(function Slider(
       <input
         ref={ref}
         type="range"
-        className={cn(
-          `[&::-webkit-slider-thumb]:appearance-none
+        className={
+          (cn(
+            `[&::-webkit-slider-thumb]:appearance-none
         [&::-webkit-slider-thumb]:w-5
         [&::-webkit-slider-thumb]:h-5
         [&::-webkit-slider-thumb]:bg-switch-base
@@ -35,9 +36,11 @@ export const Slider = forwardRef<HTMLInputElement, SliderProps>(function Slider(
         [&::-moz-range-thumb]:bg-switch-base
         [&::-moz-range-thumb]:rounded-full
         w-full h-1 bg-disabled-strong rounded-lg appearance-none cursor-pointer dark:bg-disabled-strong`,
-          innerValue === 0 &&
-            '[&::-webkit-slider-thumb]:bg-disabled-strong [&::-moz-range-thumb]:bg-disabled-strong',
-        )}
+            innerValue === 0 &&
+              '[&::-webkit-slider-thumb]:bg-disabled-strong [&::-moz-range-thumb]:bg-disabled-strong',
+          ),
+          className)
+        }
         disabled={disabled ?? false}
         aria-disabled={disabled ?? false}
         aria-invalid={!!errorMessage}