diff --git a/pages/en-us/components/slider.mdx b/pages/en-us/components/slider.mdx
index 7612a30..02663be 100644
--- a/pages/en-us/components/slider.mdx
+++ b/pages/en-us/components/slider.mdx
@@ -1,5 +1,6 @@
 import { Layout, Playground, Attributes } from 'lib/components'
 import { Slider, Row, Spacer } from 'components'
+import { useState } from 'react'
 
 export const meta = {
   title: 'Slider',
@@ -47,6 +48,26 @@ Display the current value and an inputable range.
 </div>
 `} />
 
+<Playground
+  title="Event"
+  desc="Get event when slide."
+  scope={{ Slider, Row, useState }}
+  code={`
+() => {
+  const [value, setValue] = useState()
+  const handler = val => {
+    console.log(val)
+    setValue(val)
+  }
+  return (
+    <Row style={{ width: '75%' }}>
+      <Slider value={value} onChange={handler} />
+    </Row>
+  )
+}
+`} />
+
+
 <Attributes edit="/pages/en-us/components/slider.mdx">
 <Attributes.Title>Slider.Props</Attributes.Title>
 
diff --git a/pages/zh-cn/components/slider.mdx b/pages/zh-cn/components/slider.mdx
index 813804a..835ff1e 100644
--- a/pages/zh-cn/components/slider.mdx
+++ b/pages/zh-cn/components/slider.mdx
@@ -1,5 +1,6 @@
 import { Layout, Playground, Attributes } from 'lib/components'
 import { Slider, Row, Spacer } from 'components'
+import { useState } from 'react'
 
 export const meta = {
   title: '滑动输入 Slider',
@@ -47,6 +48,25 @@ export const meta = {
 </div>
 `} />
 
+<Playground
+  title="事件"
+  desc="在滑动时获取值的变化。"
+  scope={{ Slider, Row, useState }}
+  code={`
+() => {
+  const [value, setValue] = useState()
+  const handler = val => {
+    console.log(val)
+    setValue(val)
+  }
+  return (
+    <Row style={{ width: '75%' }}>
+      <Slider value={value} onChange={handler} />
+    </Row>
+  )
+}
+`} />
+
 <Attributes edit="/pages/zh-cn/components/slider.mdx">
 <Attributes.Title>Slider.Props</Attributes.Title>