86 lines
2.5 KiB
TypeScript
86 lines
2.5 KiB
TypeScript
/*
|
|
* @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;
|