diff --git a/.dumirc.ts b/.dumirc.ts
index 1959181dc..601b263e8 100644
--- a/.dumirc.ts
+++ b/.dumirc.ts
@@ -163,6 +163,7 @@ export default defineConfig({
{ title: 'Switch 开关', link: '/components/switch' },
{ title: 'Select 选择器', link: '/components/select' },
{ title: 'TreeSelect 树选择', link: '/components/tree-select' },
+ { title: 'Slider 滑动输入条', link: '/components/slider' },
],
},
{
diff --git a/packages/design/package.json b/packages/design/package.json
index 563bcf4b4..31e4e1faf 100644
--- a/packages/design/package.json
+++ b/packages/design/package.json
@@ -53,6 +53,7 @@
"@babel/preset-env": "^7.26.0",
"antd-token-previewer": "^2.0.8",
"rc-select": "^14.16.2",
+ "rc-slider": "^11.1.7",
"rc-table": "^7.48.1",
"rc-tree-select": "^5.24.3"
},
diff --git a/packages/design/src/checkbox/interface.ts b/packages/design/src/checkbox/interface.ts
deleted file mode 100644
index c7f4b2035..000000000
--- a/packages/design/src/checkbox/interface.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from 'antd/es/radio/interface';
diff --git a/packages/design/src/index.ts b/packages/design/src/index.ts
index 2909744f6..e4f3707e6 100644
--- a/packages/design/src/index.ts
+++ b/packages/design/src/index.ts
@@ -75,6 +75,9 @@ export type { SelectProps } from './select';
export { default as TreeSelect } from './tree-select';
export type { TreeSelectProps } from './tree-select';
+export { default as Slider } from './slider';
+export type { SliderSingleProps, SliderRangeProps } from './slider';
+
export { default as Tooltip } from './tooltip';
export type { TooltipProps } from './tooltip';
diff --git a/packages/design/src/slider/demo/basic.tsx b/packages/design/src/slider/demo/basic.tsx
new file mode 100644
index 000000000..1c0f8eb57
--- /dev/null
+++ b/packages/design/src/slider/demo/basic.tsx
@@ -0,0 +1,22 @@
+import React, { useState } from 'react';
+import { Slider, Switch } from '@oceanbase/design';
+
+const App: React.FC = () => {
+ const [disabled, setDisabled] = useState(false);
+
+ const onChange = (checked: boolean) => {
+ setDisabled(checked);
+ };
+
+ return (
+ <>
+
+
+
+
+ Disabled:
+
+ );
+};
+
+export default App;
diff --git a/packages/design/src/slider/demo/marks.tsx b/packages/design/src/slider/demo/marks.tsx
new file mode 100644
index 000000000..658b960de
--- /dev/null
+++ b/packages/design/src/slider/demo/marks.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { Slider } from '@oceanbase/design';
+import type { SliderSingleProps } from '@oceanbase/design';
+
+const marks: SliderSingleProps['marks'] = {
+ 0: '0°C',
+ 20: '20°C',
+ 40: '40°C',
+ 60: '60°C',
+ 80: '80°C',
+ 100: {
+ style: {
+ color: '#f50',
+ },
+ label: 100°C,
+ },
+};
+
+const App: React.FC = () => (
+ <>
+
+
+
+
+);
+
+export default App;
diff --git a/packages/design/src/slider/demo/vertical.tsx b/packages/design/src/slider/demo/vertical.tsx
new file mode 100644
index 000000000..74a25f2b5
--- /dev/null
+++ b/packages/design/src/slider/demo/vertical.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { Slider, Space } from '@oceanbase/design';
+import type { SliderSingleProps } from '@oceanbase/design';
+
+const marks: SliderSingleProps['marks'] = {
+ 0: '0°C',
+ 20: '20°C',
+ 40: '40°C',
+ 60: '60°C',
+ 80: '80°C',
+ 100: {
+ style: {
+ color: '#f50',
+ },
+ label: 100°C,
+ },
+};
+
+const App: React.FC = () => (
+
+
+
+
+
+);
+
+export default App;
diff --git a/packages/design/src/slider/index.md b/packages/design/src/slider/index.md
new file mode 100644
index 000000000..d16c0e111
--- /dev/null
+++ b/packages/design/src/slider/index.md
@@ -0,0 +1,20 @@
+---
+title: Slider 滑动输入条
+nav:
+ title: 基础组件
+ path: /components
+---
+
+- 🔥 完全继承 antd [Slider](https://ant.design/components/slider-cn) 的能力和 API，可无缝切换。
+- 💄 定制主题和样式，符合 OceanBase Design 设计规范。
+
+## 代码演示
+
+
+