通用组件开发

src/components/Range/example.tsx

@@ -0,0 +1,85 @@
+/*
+ * @Author: juguohong juguohong@flashhold.com
+ * @Date: 2025-08-16 17:59:28
+ * @LastEditors: juguohong juguohong@flashhold.com
+ * @LastEditTime: 2025-08-16 23:48:25
+ * @FilePath: /mini-programs/src/components/Range/example.tsx
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+import React, { useState } from 'react';
+import NtrpRange from './index';
+
+const RangeExample: React.FC = () => {
+  const [ntrpRange, setNtrpRange] = useState<[number, number]>([2.0, 4.0]);
+  const [customRange, setCustomRange] = useState<[number, number]>([0, 100]);
+
+  const handleNtrpChange = (value: [number, number]) => {
+    console.log('NTRP range changed:', value);
+    setNtrpRange(value);
+  };
+
+  const handleCustomChange = (value: [number, number]) => {
+    console.log('Custom range changed:', value);
+    setCustomRange(value);
+  };
+
+  return (
+    <div >
+      <h1>Range 组件示例</h1>
+      
+      <div style={{ marginBottom: '40px' }}>
+        <h2>NTRP 水平区间选择器</h2>
+        <NtrpRange
+          min={1.0}
+          max={5.0}
+          step={0.5}
+          value={ntrpRange}
+          onChange={handleNtrpChange}
+        />
+        <div >
+          当前选择范围: {ntrpRange[0]} - {ntrpRange[1]}
+        </div>
+      </div>
+
+      <div style={{ marginBottom: '40px' }}>
+        <h2>自定义范围选择器</h2>
+        <NtrpRange
+          min={0}
+          max={100}
+          step={10}
+          value={customRange}
+          onChange={handleCustomChange}
+        />
+        <div style={{ marginTop: '16px', fontSize: '14px', color: '#666' }}>
+          当前选择范围: {customRange[0]} - {customRange[1]}
+        </div>
+      </div>
+
+      <div style={{ marginBottom: '40px' }}>
+        <h2>禁用状态</h2>
+        <NtrpRange
+          min={1}
+          max={10}
+          step={1}
+          value={[3, 7]}
+          disabled={true}
+        />
+        <div style={{ marginTop: '16px', fontSize: '14px', color: '#999' }}>
+          此选择器已被禁用
+        </div>
+      </div>
+
+      <div style={{ marginBottom: '40px' }}>
+        <h2>测试说明</h2>
+        <div style={{ fontSize: '14px', color: '#666', lineHeight: '1.6' }}>
+          <p>1. 点击并拖拽左右滑块手柄</p>
+          <p>2. 查看控制台日志确认拖拽事件</p>
+          <p>3. 观察滑块位置和值的实时变化</p>
+          <p>4. 检查调试信息显示</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default RangeExample;