MemoryBear/web/src/components/SliderInput

SliderInput 组件

组合了 Slider 和 InputNumber 的组件，支持拖拽和输入两种方式设置数值。

功能特性

• 同时支持滑块拖拽和数字输入
• 自动同步两个控件的值
• 支持最小值、最大值、步长设置
• 支持自定义标记点
• 支持禁用状态
• 响应式布局

使用方法

基础用法

import SliderInput from '@/components/SliderInput';

function MyComponent() {
  const [blockSize, setBlockSize] = useState(500);

  return (
    <SliderInput 
      value={blockSize}
      onChange={setBlockSize}
      min={100}
      max={2000}
      step={50}
    />
  );
}

带标签

<SliderInput 
  label="块大小 (Block Size)"
  value={blockSize}
  onChange={setBlockSize}
  min={100}
  max={2000}
  step={50}
/>

带标记点

<SliderInput 
  label="块大小"
  value={blockSize}
  onChange={setBlockSize}
  min={100}
  max={2000}
  step={50}
  marks={{
    100: '100',
    500: '500',
    1000: '1000',
    2000: '2000',
  }}
/>

自定义标记点样式

<SliderInput 
  label="块大小"
  value={blockSize}
  onChange={setBlockSize}
  min={100}
  max={2000}
  step={50}
  marks={{
    100: { style: { color: '#f50' }, label: '最小' },
    1000: { style: { color: '#1890ff' }, label: '推荐' },
    2000: { style: { color: '#f50' }, label: '最大' },
  }}
/>

带提示信息

<SliderInput 
  label="块大小"
  value={blockSize}
  onChange={setBlockSize}
  min={100}
  max={2000}
  step={50}
  tooltip={{
    open: true,
    placement: 'top',
    formatter: (value) => `${value} 字符`,
  }}
/>

在表单中使用

import { Form } from 'antd';
import SliderInput from '@/components/SliderInput';

function FormExample() {
  const [form] = Form.useForm();

  return (
    <Form form={form}>
      <Form.Item 
        name="blockSize" 
        label="块大小"
        initialValue={500}
      >
        <SliderInput 
          min={100}
          max={2000}
          step={50}
        />
      </Form.Item>
    </Form>
  );
}

在 CreateDataset 中使用

import SliderInput from '@/components/SliderInput';

const CreateDataset = () => {
  const [blockSize, setBlockSize] = useState(500);
  const [overlap, setOverlap] = useState(50);

  return (
    <div className='rb:flex rb:flex-col rb:gap-6'>
      <SliderInput 
        label={t('knowledgeBase.blockSize') || '块大小'}
        value={blockSize}
        onChange={setBlockSize}
        min={100}
        max={2000}
        step={50}
        marks={{
          100: '100',
          500: '500',
          1000: '1000',
          2000: '2000',
        }}
      />
      
      <SliderInput 
        label={t('knowledgeBase.overlap') || '重叠大小'}
        value={overlap}
        onChange={setOverlap}
        min={0}
        max={200}
        step={10}
        marks={{
          0: '0',
          50: '50',
          100: '100',
          200: '200',
        }}
      />
    </div>
  );
}

Props

属性	类型	默认值	说明
value	number	-	当前值（受控）
onChange	(value: number | null) => void	-	值变化时的回调函数
min	number	0	最小值
max	number	100	最大值
step	number	1	步长
defaultValue	number	0	默认值（非受控）
disabled	boolean	false	是否禁用
label	string	-	标签文本
className	string	''	容器自定义样式类名
sliderClassName	string	''	Slider 自定义样式类名
inputClassName	string	''	InputNumber 自定义样式类名
marks	Record<number, string | object>	-	刻度标记
tooltip	object	-	提示信息配置

tooltip 配置

属性	类型	说明
open	boolean	是否始终显示提示
placement	'top' | 'left' | 'right' | 'bottom'	提示位置
formatter	(value?: number) => ReactNode	格式化提示内容

注意事项

1. 值的范围：输入的值会自动限制在 min 和 max 之间
2. 步长：拖拽和输入都会遵循 step 设置
3. 受控组件：建议使用受控模式（传入 value 和 onChange）
4. 布局：Slider 占据剩余空间，InputNumber 固定宽度 120px

样式定制

自定义宽度

<SliderInput 
  value={blockSize}
  onChange={setBlockSize}
  className="rb:max-w-2xl"
/>

自定义 InputNumber 宽度

<SliderInput 
  value={blockSize}
  onChange={setBlockSize}
  inputClassName="rb:w-32"
/>

常见场景

场景1：文档分块大小设置

<SliderInput 
  label="块大小 (字符数)"
  value={chunkSize}
  onChange={setChunkSize}
  min={100}
  max={2000}
  step={50}
  defaultValue={500}
  marks={{
    100: '最小',
    500: '推荐',
    2000: '最大',
  }}
  tooltip={{
    formatter: (value) => `${value} 字符`,
  }}
/>

场景2：重叠大小设置

<SliderInput 
  label="重叠大小 (字符数)"
  value={overlap}
  onChange={setOverlap}
  min={0}
  max={Math.floor(chunkSize * 0.5)}
  step={10}
  defaultValue={50}
  tooltip={{
    formatter: (value) => `${value} 字符 (${((value / chunkSize) * 100).toFixed(0)}%)`,
  }}
/>

场景3：温度参数设置

<SliderInput 
  label="Temperature"
  value={temperature}
  onChange={setTemperature}
  min={0}
  max={2}
  step={0.1}
  defaultValue={0.7}
  marks={{
    0: '精确',
    0.7: '平衡',
    2: '创造',
  }}
/>