doc(Slider): add example. (#135)

uiwjs · Nov 28, 2023 · b899b9c · b899b9c
1 parent 978a7b0
commit b899b9c
Showing 1 changed file with 25 additions and 0 deletions.
diff --git a/packages/color-slider/README.md b/packages/color-slider/README.md
@@ -35,6 +35,31 @@ export default function Demo() {
 }
 ```
 
+```tsx mdx:preview
+import React, { useState } from 'react';
+import Slider from '@uiw/react-color-slider';
+import Wheel from '@uiw/react-color-wheel';
+
+export default function Demo() {
+  const [hsva, setHsva] = useState({ h: 0, s: 0, v: 68, a: 1 });
+  return (
+    <>
+      <Slider
+        color={hsva}
+        style={{ paddingBottom: 10 }}
+        onChange={(color) => {
+          setHsva({ ...hsva, ...color.hsv });
+        }}
+      />
+      <Wheel
+        color={hsva}
+        onChange={(color) => setHsva({ ...hsva, ...color.hsva })}
+      />
+    </>
+  );
+}
+```
+
 ## Props
 
 ```ts