带有react图像滑块

import React, { useState } from 'react';
import Draggable from 'react-draggable';

const ImageSlider = () => {
  const [dragged, setDragged] = useState(false);

  const handleDrag = () => {
    setDragged(true);
  };

  const handleStop = () => {
    if (dragged) {
      // 用户完成了滑块操作，可进行相应的验证逻辑
      console.log('验证通过');
    }
  };

  return (
    <div>
      {/* 图片容器 */}
      <div>
        <img src="image.jpg" alt="Slide Image" />
      </div>
      {/* 滑块 */}
      <Draggable
        axis="x"
        bounds="parent"
        onDrag={handleDrag}
        onStop={handleStop}
      >
        <div className="slider"></div>
      </Draggable>
    </div>
  );
};

export default ImageSlider;