mini-programs/src/components/Range

NtrpRange 范围选择器组件

基于NutUI Range组件的双滑块范围选择器，通过CSS样式覆盖完全匹配设计稿，支持自定义范围、步长和回调函数。

功能特性

• 🎯 双滑块设计，支持选择范围区间
• 🎨 精准还原设计稿的视觉效果
• 📱 响应式设计，支持移动端
• 🎮 流畅的拖拽交互体验
• ⚙️ 可配置的最小值、最大值和步长
• 🔒 支持禁用状态
• 📊 实时值变化回调

基本用法

import NtrpRange from '@/components/Range';

const MyComponent = () => {
  const [value, setValue] = useState<[number, number]>([2.0, 4.0]);

  return (
    <NtrpRange
      min={2.0}
      max={4.0}
      step={0.5}
      value={value}
      onChange={setValue}
    />
  );
};

属性说明

属性	类型	默认值	说明
min	number	2.0	最小值
max	number	4.0	最大值
step	number	0.5	步长
value	[number, number]	[min, max]	当前选择的范围值
onChange	(value: [number, number]) => void	-	值变化时的回调函数
disabled	boolean	false	是否禁用

技术实现

• 基于NutUI Range组件，确保拖拽功能的可靠性
• 通过CSS样式覆盖，完全匹配设计稿视觉效果
• TypeScript + React Hooks
• 响应式设计，支持移动端

设计规范

组件严格按照设计稿实现，包含以下视觉元素：

• 网球图标: 黑色轮廓的网球图标
• 标题: "NTRP水平区间" 文字
• 标签: 左右两端的范围标签（如"2.0及以下"、"4.0及以上"）
• 滑块轨道: 圆角矩形容器，带有浅灰色边框和阴影
• 滑块手柄: 两个白色圆形手柄，带有黑色边框和阴影
• 轨道填充: 黑色填充条，显示当前选择的范围
• 标记点: 四个浅灰色圆点，均匀分布在轨道上

样式定制

组件使用 BEM 命名规范，可以通过 CSS 变量或覆盖样式来自定义外观：

.ntrp-range {
  // 自定义样式
  &__track {
    background: #f5f5f5;
    border-color: #d0d0d0;
  }
  
  &__handle {
    background: #007bff;
    border-color: #0056b3;
  }
}

注意事项

1. 确保 min < max，否则组件可能无法正常工作
2. step 值应该能够整除 max - min 的差值
3. 组件内部会确保左右滑块不会重叠，最小间距为 step 值
4. 拖拽时会自动吸附到最近的步长值

示例

查看 example.tsx 文件获取更多使用示例。