在React中实现依赖型滑块：确保值约束的技巧

// Slider.jsx
import React from 'react';

function Slider(props) {
  const { title, value, min, max, step, onChange } = props;

  const handleInputChange = (event) => {
    // 将值转换为数字，因为input.value总是字符串
    onChange(parseFloat(event.target.value));
  };

  return (
    <div className="Slider" style={{ textAlign: 'center', margin: '10px 0' }}>
      <h3 className='sliderTitle'>{title}</h3>
      <p>{value.toFixed(2)} seconds</p> {/* 显示两位小数 */}
      <input
        type="range"
        value={value}
        min={min}
        max={max}
        step={step}
        onInput={handleInputChange} // 使用onInput来实时更新
        style={{ width: '100%' }}
      />
    </div>
  );
}

export default Slider;

// VidTrim.jsx
import React, { useState } from 'react';
import Slider from './Slider'; // 引入上面定义的Slider组件

function VidTrim() {
  const [start, setStart] = useState(0);
  const [end, setEnd] = useState(0);

  // 当起始滑块值变化时
  const onStartChange = (newStartValue) => {
    setStart(newStartValue);
    // 确保结束值不低于新的起始值
    setEnd(prevEnd => Math.max(prevEnd, newStartValue));
  };

  // 当结束滑块值变化时
  const onEndChange = (newEndValue) => {
    // 确保新的结束值不低于当前的起始值
    setEnd(Math.max(newEndValue, start));
  };

  return (
    <div className="VidTrim" style={{ padding: '20px', maxWidth: '600px', margin: 'auto', border: '1px solid #ccc', borderRadius: '8px' }}>
      <h2>视频剪辑范围选择</h2>
      <div id="Sliders">
        <Slider
          title="起始时间"
          value={start}
          min={0}
          max={100}
          step={0.01}
          onChange={onStartChange}
        />

        <Slider
          title="结束时间"
          value={end}
          min={start} // 结束滑块的最小值为当前起始值
          max={100}
          step={0.01}
          onChange={onEndChange}
        />
      </div>
      <div style={{ marginTop: '20px', fontSize: '1.1em' }}>
        <p>当前剪辑范围: {start.toFixed(2)}秒 - {end.toFixed(2)}秒</p>
      </div>
    </div>
  );
}

export default VidTrim;