feat(slider): update slider demo, alignment vue mobile

src/slider/_example/base.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Slider } from 'tdesign-mobile-react';
+import './style/index.less';
+
+export default function BaseDemo() {
+  return (
+    <div className="wrapper-base">
+      <Slider defaultValue={23} />
+    </div>
+  );
+}

src/slider/_example/capsule.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Slider } from 'tdesign-mobile-react';
+import './style/index.less';
+
+export default function CapsuleDemo() {
+  const marks = {
+    0: '0',
+    20: '20',
+    40: '40',
+    60: '60',
+    80: '80',
+    100: '100',
+  };
+  return (
+    <>
+      <div className="wrapper-capsule">
+        <Slider defaultValue={30} theme="capsule" />
+      </div>
+      <div className="wrapper-capsule">
+        <Slider range defaultValue={[40, 60]} theme="capsule" />
+      </div>
+      <div className="wrapper-capsule">
+        {/* eslint-disable-next-line no-template-curly-in-string */}
+        <Slider range defaultValue={[40, 60]} label="${value}%" theme="capsule" />
+      </div>
+      <div className="wrapper-capsule">
+        <Slider defaultValue={60} marks={marks} step={20} theme="capsule" />
+      </div>
+      <div className="wrapper-capsule">
+        <Slider range defaultValue={[20, 80]} marks={marks} step={20} theme="capsule" />
+      </div>
+    </>
+  );
+}

src/slider/_example/disabled.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Slider } from 'tdesign-mobile-react';
+import './style/index.less';
+
+export default function DisabledDemo() {
+  const marks = {
+    0: '0',
+    20: '20',
+    40: '40',
+    60: '60',
+    80: '80',
+    100: '100',
+  };
+  return (
+    <>
+      <div className="wrapper-disabled">
+        <Slider disabled value={35} />
+      </div>
+      <div className="wrapper-disabled">
+        {/* eslint-disable-next-line no-template-curly-in-string */}
+        {/* <Slider showExtremeValue range disabled label="${value}%" value={[40, 60]} /> */}
+      </div>
+      <div className="wrapper-disabled">
+        <Slider disabled range value={[20, 60]} marks={marks} step={20} />
+      </div>
+    </>
+  );
+}

src/slider/_example/index.jsx

@@ -1,59 +1,35 @@
 import React from 'react';
-import TDemoBlock from '../../../site/mobile/components/DemoBlock';
 import TDemoHeader from '../../../site/mobile/components/DemoHeader';
-import './style/index.less';
-
+import TDemoBlock from '../../../site/mobile/components/DemoBlock';
 import BaseDemo from './base';
-import ValueDemo from './value';
-import UnZeroDemo from './unZero';
-import MarkDemo from './mark';
 import RangDemo from './range';
-import DisableDemo from './disable';
-import TitleDemo from './title';
+import LabelDemo from './label';
+import StepDemo from './step';
+import DisabledDemo from './disabled';
+import CapsuleDemo from './capsule';
+import './style/index.less';
 
 export default function Base() {
   return (
     <div className="tdesign-mobile-demo">
       <TDemoHeader title="Slider 滑动选择器" summary="用于选择横轴上的数值、区间、档位" />
-      <TDemoBlock title="01 类型" summary="基础滑动选择器">
-        <div className="tdesign-demo-block-wrap">
-          <BaseDemo />
-        </div>
-      </TDemoBlock>
-      <TDemoBlock title="" summary="带数值滑动选择器">
-        <div className="tdesign-demo-block-wrap">
-          <ValueDemo />
-        </div>
-      </TDemoBlock>
-      <TDemoBlock title="" summary="起始非零滑动选择器">
-        <div className="tdesign-demo-block-wrap">
-          <UnZeroDemo />
-        </div>
+      <TDemoBlock title="01 类型" summary="单游标滑块">
+        <BaseDemo />
       </TDemoBlock>
-      <TDemoBlock title="" summary="带刻度滑动选择器">
-        <div className="tdesign-demo-block-wrap">
-          <MarkDemo />
-        </div>
+      <TDemoBlock summary="双游标滑块">
+        <RangDemo />
       </TDemoBlock>
-      <TDemoBlock title="" summary="区间滑动选择器">
-        <div className="tdesign-demo-block-wrap">
-          <RangDemo />
-        </div>
+      <TDemoBlock summary="带数值单游标/双游标滑块">
+        <LabelDemo />
       </TDemoBlock>
-      <TDemoBlock title="02 状态" summary="滑动选择器禁用状态">
-        <div className="tdesign-demo-block-wrap">
-          <DisableDemo />
-        </div>
+      <TDemoBlock summary="带刻度单游标/双游标滑块">
+        <StepDemo />
       </TDemoBlock>
-      <TDemoBlock title="03 规格" summary="无标题滑动选择器">
-        <div className="tdesign-demo-block-wrap">
-          <BaseDemo />
-        </div>
+      <TDemoBlock title="02 组件状态" summary="滑块禁用状态">
+        <DisabledDemo />
       </TDemoBlock>
-      <TDemoBlock title="" summary="有标题滑动选择器">
-        <div className="tdesign-demo-block-wrap tdesign-demo-block-wrap-flex">
-          <TitleDemo />
-        </div>
+      <TDemoBlock title="03 特殊样式" summary="胶囊型滑块">
+        <CapsuleDemo />
       </TDemoBlock>
     </div>
   );

src/slider/_example/label.tsx

@@ -0,0 +1,25 @@
+import React, { useState } from 'react';
+import { Slider } from 'tdesign-mobile-react';
+import type { SliderValue } from 'tdesign-mobile-react';
+import './style/index.less';
+
+export default function LabelDemo() {
+  const [value, setValue] = useState(10);
+
+  const onChange = (value: number) => {
+    setValue(value);
+  };
+
+  const handleLabel = (value: SliderValue) => value;
+
+  return (
+    <>
+      <div className="wrapper-label">
+        <Slider label value={value} onChange={onChange} />
+      </div>
+      <div className="wrapper-label">
+        <Slider range showExtremeValue defaultValue={[20, 60]} label={handleLabel} />
+      </div>
+    </>
+  );
+}

src/slider/_example/range.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Slider } from 'tdesign-mobile-react';
+import './style/index.less';
+
+export default function RangDemo() {
+  const onChange = (value: number | number[]) => {
+    console.log(`change to ${value}`);
+  };
+  return (
+    <div className="wrapper-base">
+      <Slider range defaultValue={[30, 70]} onChange={onChange} />
+    </div>
+  );
+}

src/slider/_example/step.tsx

@@ -0,0 +1,37 @@
+import React, { useState } from 'react';
+import { Slider } from 'tdesign-mobile-react';
+import './style/index.less';
+
+export default function StepDemo() {
+  const [value, setValue] = useState<number>(6.5);
+  const marksRange = {
+    5: '5',
+    6: '6',
+    7: '7',
+    8: '8',
+    9: '9',
+    10: '10',
+  };
+  const marks = {
+    0: '0',
+    20: '20',
+    40: '40',
+    60: '60',
+    80: '80',
+    100: '100',
+  };
+
+  const onChange = (value: number) => {
+    setValue(value);
+  };
+  return (
+    <>
+      <div className="wrapper-base">
+        <Slider value={value} marks={marksRange} min={5} max={10} step={0.5} onChange={onChange} />
+      </div>
+      <div className="wrapper-base">
+        <Slider range defaultValue={[20, 60]} marks={marks} step={20} />
+      </div>
+    </>
+  );
+}

src/slider/_example/style/index.less

@@ -1,21 +1,28 @@
-.tdesign-mobile-demo {
-  background-color: #ffffff;
-  padding-bottom: 62px;
-  .tdesign-demo-block-wrap {
-    padding: 0 16px 8px;
-    min-height: 48px;
-    display: flex;
+.wrapper {
+  &-base {
+    background: var(--bg-color-demo, #fff);
+    padding: 18px 0;
+  }
 
-    &__title {
-      width: 30%;
-    }
+  &-capsule {
+    background: var(--bg-color-demo, #fff);
+    margin-top: 16px;
+    padding: 16px 0;
+  }
 
-    &-flex {
-      display: flex;
-    }
+  &-disabled {
+    background: var(--bg-color-demo, #fff);
+    margin-top: 16px;
+    padding: 18px 0;
+  }
 
-    &__slider {
-      width: 70%;
-    }
+  &-label {
+    background: var(--bg-color-demo, #fff);
+    margin-top: 16px;
+    padding: 18px 0;
   }
 }
+
+.tdesign-mobile-demo {
+  background: #f6f6f6;
+}