ShaderGradientUI

ruucm · Dec 23, 2024 · ed9852a · ed9852a
1 parent 703f504
commit ed9852a
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 4 deletions.
diff --git 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
@@ -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
@@ -0,0 +1 @@
+export * from './Slider'
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml