diff --git a/packages/arco-lib/src/components/Slider.tsx b/packages/arco-lib/src/components/Slider.tsx
new file mode 100644
index 00000000..09b584c4
--- /dev/null
+++ b/packages/arco-lib/src/components/Slider.tsx
@@ -0,0 +1,63 @@
+import { Slider as BaseSlider } from "@arco-design/web-react";
+import { implementRuntimeComponent } from "@sunmao-ui/runtime";
+import { css } from "@emotion/css";
+import { Type, Static } from "@sinclair/typebox";
+import { FALLBACK_METADATA, getComponentProps } from "../sunmao-helper";
+import { SliderPropsSpec as BaseSliderPropsSpec } from "../generated/types/Slider";
+
+const SliderPropsSpec = Type.Object(BaseSliderPropsSpec);
+const SliderStateSpec = Type.Object({});
+
+const exampleProperties: Static<typeof SliderPropsSpec> = {
+  min: 0,
+  max: 100,
+  disabled: false,
+  tooltipVisible: true,
+  range: false,
+  vertical: false,
+  marks: {},
+  onlyMarkValue: false,
+  reverse: false,
+  step:1,
+  showTicks:false
+};
+
+export const Slider = implementRuntimeComponent({
+  version: "arco/v1",
+  metadata: {
+    ...FALLBACK_METADATA,
+    name: "slider",
+    displayName: "Slider",
+    exampleProperties,
+    annotations: {
+      category: "Display",
+    },
+  },
+  spec: {
+    properties: SliderPropsSpec,
+    state: SliderStateSpec,
+    methods: {},
+    slots: [],
+    styleSlots: ["content"],
+    events: ["onChange", "onAfterChange"],
+  },
+})((props) => {
+  const { ...cProps } = getComponentProps(props);
+  const { customStyle, elementRef, callbackMap, mergeState } = props;
+
+  return (
+    <BaseSlider
+      ref={elementRef}
+      onChange={(val) => {
+        mergeState({ value: val });
+        callbackMap?.onChange?.();
+      }}
+      onAfterChange={(val) => {
+        mergeState({ value: val });
+        callbackMap?.onAfterChange?.();
+      }}
+      className={css(customStyle?.content)}
+      {...cProps}
+    />
+  );
+});
diff --git a/packages/arco-lib/src/generated/types/Slider.ts b/packages/arco-lib/src/generated/types/Slider.ts
new file mode 100644
index 00000000..fccb4bfc
--- /dev/null
+++ b/packages/arco-lib/src/generated/types/Slider.ts
@@ -0,0 +1,56 @@
+import { Type } from '@sinclair/typebox';
+import { StringUnion } from '../../sunmao-helper';
+import { Category } from '../../constants/category';
+import { CORE_VERSION, CoreWidgetName } from '@sunmao-ui/editor-sdk';
+
+export const SliderPropsSpec = {
+    min: Type.Number({
+        title: 'Min',
+        category: Category.Basic
+    }),
+    max: Type.Number({
+        title: 'Max',
+        category: Category.Basic
+    }),
+    disabled: Type.Boolean({
+        title: 'Disabled',
+        category: Category.Basic
+    }),
+    toolTipPosition: Type.Optional(StringUnion(['top', 'tl', 'tr', 'bottom', 'bl', 'br', 'left', 'lt', 'lb', 'right', 'rt', 'rb'], {
+        category: Category.Layout,
+        title: 'Tooltip Position'
+    })),
+    vertical: Type.Boolean({
+        title: 'Vertical',
+        category: Category.Layout,
+    }),
+    tooltipVisible: Type.Boolean({
+        title: 'Show Tooltip',
+        category: Category.Behavior
+    }),
+    range: Type.Boolean({
+        title: 'Enable Range',
+        category: Category.Behavior
+    }),
+    step: Type.Number({
+        title: 'Step',
+        category: Category.Behavior
+    }),
+    showTicks: Type.Boolean({
+        title: 'Show Ticks',
+        category: Category.Behavior
+    }),
+    marks: Type.Object({}, {
+        title: 'Marks',
+        widget: `${CORE_VERSION}/${CoreWidgetName.RecordField}`,
+        category: Category.Behavior
+    }),
+    onlyMarkValue: Type.Boolean({
+        title: 'Only Mark Value',
+        category: Category.Behavior
+    }),
+    reverse: Type.Boolean({
+        title: 'Reverse',
+        category: Category.Behavior
+    })
+};
\ No newline at end of file
diff --git a/packages/arco-lib/src/lib.ts b/packages/arco-lib/src/lib.ts
index 213e152a..df4343b6 100644
--- a/packages/arco-lib/src/lib.ts
+++ b/packages/arco-lib/src/lib.ts
@@ -36,6 +36,7 @@ import { Tabs } from './components/Tabs';
 import { FormControl } from './components/Form/FormControl';
 import { Descriptions } from './components/Descriptions';
 import { Row, Col } from './components/Grid'
+import { Slider } from './components/Slider';
 
 import './style.css';
 
@@ -77,7 +78,8 @@ export const components: SunmaoLib['components'] = [
   Tabs,
   FormControl,
   Descriptions,
-  Row, Col
+  Row, Col,
+  Slider
 ];
 export const traits: SunmaoLib['traits'] = [];
 export const modules: SunmaoLib['modules'] = [];