From ed9852a128452ceb9ffaca0a276d9b2e1c864471 Mon Sep 17 00:00:00 2001
From: ruucm <ruucm.a@gmail.com>
Date: Mon, 23 Dec 2024 16:57:20 +0900
Subject: [PATCH] ShaderGradientUI

---
 packages/shadergradient-v2/package.json             |  1 +
 .../src/ShaderGradientUI/Slider.tsx                 | 13 +++++++++++++
 .../shadergradient-v2/src/ShaderGradientUI/index.ts |  1 +
 pnpm-lock.yaml                                      | 10 ++++++----
 4 files changed, 21 insertions(+), 4 deletions(-)
 create mode 100644 packages/shadergradient-v2/src/ShaderGradientUI/Slider.tsx
 create mode 100644 packages/shadergradient-v2/src/ShaderGradientUI/index.ts

diff --git a/packages/shadergradient-v2/package.json b/packages/shadergradient-v2/package.json
index aaa86bb4..b0aa7552 100644
--- a/packages/shadergradient-v2/package.json
+++ b/packages/shadergradient-v2/package.json
@@ -42,6 +42,7 @@
     "globby": "^14.0.2",
     "query-string": "^7.1.1",
     "react": "^18.3.1",
+    "react-slider": "^2.0.4",
     "socket.io": "^4.7.5",
     "socket.io-client": "^4.7.5",
     "tailwindcss": "^3.4.10",
diff --git a/packages/shadergradient-v2/src/ShaderGradientUI/Slider.tsx b/packages/shadergradient-v2/src/ShaderGradientUI/Slider.tsx
new file mode 100644
index 00000000..c0c551da
--- /dev/null
+++ b/packages/shadergradient-v2/src/ShaderGradientUI/Slider.tsx
@@ -0,0 +1,13 @@
+import ReactSlider from 'react-slider'
+
+export function Slider(): JSX.Element {
+  return (
+    <ReactSlider
+      className='bg-red-500 h-slider w-full h-full'
+      markClassName='w-mark h-mark bg-primary top-1/2 transform -translate-y-1/2 slider-mark-center-x'
+      thumbClassName='bg-primary w-thumb h-thumb rounded-full top-1/2 transform -translate-y-1/2 outline-none cursor-pointer'
+      thumbActiveClassName='bg-opacity-80'
+      renderThumb={(props, state) => <div {...props}>{state.valueNow}</div>}
+    />
+  )
+}
diff --git a/packages/shadergradient-v2/src/ShaderGradientUI/index.ts b/packages/shadergradient-v2/src/ShaderGradientUI/index.ts
new file mode 100644
index 00000000..4b76ec72
--- /dev/null
+++ b/packages/shadergradient-v2/src/ShaderGradientUI/index.ts
@@ -0,0 +1 @@
+export * from './Slider'
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e4861792..0bcfbdd7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -36,7 +36,7 @@ importers:
         specifier: ^8.12.0
         version: 8.12.0(react-dom@18.2.0)(react@18.2.0)(three@0.169.0)
       '@shadergradient/react':
-        specifier: ^2.0.12
+        specifier: ^2.0.16
         version: link:../../packages/shadergradient-v2
       '@testing-library/jest-dom':
         specifier: ^5.16.5
@@ -162,7 +162,7 @@ importers:
         specifier: ^8.12.0
         version: 8.12.0(react-dom@18.2.0)(react@18.2.0)(three@0.169.0)
       '@shadergradient/react':
-        specifier: ^2.0.12
+        specifier: ^2.0.16
         version: link:../../packages/shadergradient-v2
       '@types/three':
         specifier: ^0.150.0
@@ -256,7 +256,7 @@ importers:
         specifier: ^8.12.0
         version: 8.12.0(react-dom@18.2.0)(react@18.2.0)(three@0.169.0)
       '@shadergradient/react':
-        specifier: ^2.0.12
+        specifier: ^2.0.16
         version: link:../../packages/shadergradient-v2
       glsl-random:
         specifier: ^0.0.5
@@ -668,6 +668,9 @@ importers:
       react:
         specifier: ^18.3.1
         version: 18.3.1
+      react-slider:
+        specifier: ^2.0.4
+        version: 2.0.6(react@18.3.1)
       socket.io:
         specifier: ^4.7.5
         version: 4.7.5
@@ -16235,7 +16238,6 @@ packages:
     dependencies:
       prop-types: 15.8.1
       react: 18.3.1
-    dev: false
 
   /react-use-measure@2.1.1(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-nocZhN26cproIiIduswYpV5y5lQpSQS1y/4KuvUCjSKmw7ZWIS/+g3aFnX3WdBkyuGUtTLif3UTqnLLhbDoQig==}