通用组件开发

src/components/Range/style-test.tsx

@@ -0,0 +1,68 @@
+import React, { useState } from 'react';
+import NtrpRange from './index';
+
+const StyleTest: React.FC = () => {
+  const [value, setValue] = useState<[number, number]>([2.0, 4.0]);
+
+  return (
+    <div style={{ padding: '20px', maxWidth: '600px', margin: '0 auto' }}>
+      <h1>NtrpRange 样式测试</h1>
+      
+      <div style={{ marginBottom: '30px' }}>
+        <h2>NTRP 水平区间选择器</h2>
+        <NtrpRange
+          min={2.0}
+          max={4.0}
+          step={0.5}
+          value={value}
+          onChange={setValue}
+        />
+        <div style={{ marginTop: '16px', fontSize: '14px', color: '#666' }}>
+          当前选择范围: {value[0]} - {value[1]}
+        </div>
+      </div>
+
+      <div style={{ marginBottom: '30px' }}>
+        <h2>自定义范围选择器</h2>
+        <NtrpRange
+          min={0}
+          max={100}
+          step={1}
+          value={[20, 80]}
+          onChange={(val) => console.log('Custom range:', val)}
+        />
+        <div style={{ marginTop: '16px', fontSize: '14px', color: '#666' }}>
+          固定范围: 20 - 80
+        </div>
+      </div>
+
+      <div style={{ marginBottom: '30px' }}>
+        <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: '30px' }}>
+        <h2>样式说明</h2>
+        <div style={{ fontSize: '14px', color: '#666', lineHeight: '1.6' }}>
+          <p>✅ 网球图标 + "NTRP水平区间"标题</p>
+          <p>✅ 左右范围标签（"2.0及以下"、"4.0及以上"）</p>
+          <p>✅ 圆角矩形轨道容器，带有边框和阴影</p>
+          <p>✅ 白色圆形滑块手柄，黑色边框和阴影</p>
+          <p>✅ 黑色轨道填充条</p>
+          <p>✅ 五个浅灰色标记点</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default StyleTest;