improve(design): Slider color and align style

.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' },
           ],
         },
         {

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"
   },

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';
 

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 (
+    <>
+      <Slider defaultValue={30} disabled={disabled} />
+      <br />
+      <Slider range defaultValue={[20, 50]} disabled={disabled} />
+      <br />
+      Disabled: <Switch size="small" checked={disabled} onChange={onChange} />
+    </>
+  );
+};
+
+export default App;

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: <strong>100°C</strong>,
+  },
+};
+
+const App: React.FC = () => (
+  <>
+    <Slider marks={marks} defaultValue={37} />
+    <br />
+    <Slider range marks={marks} defaultValue={[26, 37]} />
+  </>
+);
+
+export default App;

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: <strong>100°C</strong>,
+  },
+};
+
+const App: React.FC = () => (
+  <Space size={70}>
+    <Slider vertical defaultValue={30} style={{ height: 300 }} />
+    <Slider vertical range step={10} defaultValue={[20, 50]} style={{ height: 300 }} />
+    <Slider vertical range marks={marks} defaultValue={[13, 68]} style={{ height: 300 }} />
+  </Space>
+);
+
+export default App;

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 设计规范。
+
+## 代码演示
+
+<!-- prettier-ignore -->
+<code src="./demo/basic.tsx" title="基本"></code>
+<code src="./demo/marks.tsx" title="带标签的滑块"></code>
+<code src="./demo/vertical.tsx" title="垂直方向的滑块"></code>
+
+## API
+
+- 详见 antd Slider 文档: https://ant.design/components/slider-cn

packages/design/src/slider/index.tsx

@@ -0,0 +1,31 @@
+import { Slider as AntSlider } from 'antd';
+import type {
+  SliderSingleProps as AntSliderSingleProps,
+  SliderRangeProps as AntSliderRangeProps,
+} from 'antd/es/slider';
+import type { SliderRef } from 'rc-slider/lib/Slider';
+import classNames from 'classnames';
+import React, { useContext } from 'react';
+import ConfigProvider from '../config-provider';
+import useStyle from './style';
+
+export * from 'antd/es/slider';
+
+const Slider = React.forwardRef<SliderRef, AntSliderSingleProps | AntSliderRangeProps>(
+  ({ prefixCls: customizePrefixCls, className, ...restProps }, ref) => {
+    const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+    const prefixCls = getPrefixCls('slider', customizePrefixCls);
+    const { wrapSSR } = useStyle(prefixCls);
+    const sliderCls = classNames(className);
+
+    return wrapSSR(
+      <AntSlider ref={ref} prefixCls={customizePrefixCls} className={sliderCls} {...restProps} />
+    );
+  }
+);
+
+if (process.env.NODE_ENV !== 'production') {
+  Slider.displayName = AntSlider.displayName;
+}
+
+export default Slider;

packages/design/src/slider/style/index.ts

@@ -0,0 +1,28 @@
+import type { CSSObject } from '@ant-design/cssinjs';
+import type { FullToken, GenerateStyle } from 'antd/es/theme/internal';
+import { genComponentStyleHook } from '../../_util/genComponentStyleHook';
+
+export type SliderToken = FullToken<'Slider'>;
+
+export const genSliderStyle: GenerateStyle<SliderToken> = (token: SliderToken): CSSObject => {
+  const { componentCls, dotSize = 8 } = token;
+  return {
+    [`${componentCls}${componentCls}-horizontal`]: {
+      [`${componentCls}-mark`]: {
+        [`${componentCls}-mark-text[style^="left: 0%; transform: translateX(-50%);"]`]: {
+          transform: `translateX(calc(0% - ${dotSize / 2}px)) !important`,
+        },
+        [`${componentCls}-mark-text[style^="left: 100%; transform: translateX(-50%);"]`]: {
+          transform: `translateX(calc(-100% + ${dotSize / 2}px)) !important`,
+        },
+      },
+    },
+  };
+};
+
+export default (prefixCls: string) => {
+  const useStyle = genComponentStyleHook('Slider', token => {
+    return [genSliderStyle(token as SliderToken)];
+  });
+  return useStyle(prefixCls);
+};

packages/design/src/theme/default.ts

@@ -104,6 +104,14 @@ const defaultTheme: ThemeConfig = {
       multipleItemBorderColor: tagColorBorder,
       multipleItemBorderColorDisabled: tagColorBorder,
     },
+    Slider: {
+      trackBg: '#006AFF',
+      trackHoverBg: '#5189fb',
+      trackBgDisabled: '#b3ccff',
+      handleColor: '#006AFF',
+      handleActiveColor: '#5189fb',
+      handleColorDisabled: '#b3ccff',
+    },
     Tag: {
       defaultColor: '#5c6b8a',
       colorBorder: tagColorBorder,