docs: update demo

docs/examples/multiple.tsx

@@ -12,22 +12,43 @@ function log(value) {
   console.log(value);
 }
 
-export default () => (
-  <div>
-    <div style={style}>
-      <Slider
-        range
-        defaultValue={[0, 10, 30]}
-        onChange={log}
-        styles={{
-          tracks: {
-            background: `linear-gradient(to right, blue, red)`,
-          },
-          track: {
-            background: 'transparent',
-          },
-        }}
-      />
+let uuid = 0;
+
+const NodeWrapper = ({ children }: { children: React.ReactElement }) => {
+  const [id] = React.useState(() => {
+    uuid += 1;
+    return uuid;
+  });
+
+  return <div>{React.cloneElement(children, {}, <div>{id}</div>)}</div>;
+};
+
+export default () => {
+  const [value, setValue] = React.useState([0, 10, 30]);
+
+  return (
+    <div>
+      <div style={style}>
+        <Slider
+          range
+          // defaultValue={[0, 10, 30]}
+          // onChange={log}
+          value={value}
+          onChange={(nextValue) => {
+            console.log('>>>', nextValue);
+            setValue(nextValue as any);
+          }}
+          handleRender={(node) => <NodeWrapper>{node}</NodeWrapper>}
+          styles={{
+            tracks: {
+              background: `linear-gradient(to right, blue, red)`,
+            },
+            track: {
+              background: 'transparent',
+            },
+          }}
+        />
+      </div>
     </div>
-  </div>
-);
+  );
+};