import React, { useState } from "react";
import Slider, { Range } from "rc-slider";
import Tooltip from "rc-tooltip";

const handle = (props: any) => {
  const { value, dragging, index, ...restProps } = props;
  return (
    <Tooltip
      prefixCls="rc-slider-tooltip"
      overlay={value}
      visible={dragging}
      placement="top"
      key={index}
    >
      <Slider.Handle value={value} {...restProps} />
    </Tooltip>
  );
};

const EfeMultiRangeSlider = () => {
  const [value, setValue] = useState([15, 35, 65, 85]);

  const handleChange = (value: any) => {
    setValue(value);
  };

  return <Range value={value} handle={handle} onChange={handleChange} />;
};

export default EfeMultiRangeSlider;
