Function PreviewSlider

src/components/common/Preview/PreviewSlider.jsx:16–151

({
  title = '',
  min = 0,
  max = 100,
  step = 1,
  value = 0,
  valueUnit = '',
  isDisabled = false,
  displayValue,
  onChange
})

};

const PreviewSlider = ({
  title = '',
  min = 0,
  max = 100,
  step = 1,
  value = 0,
  valueUnit = '',
  isDisabled = false,
  displayValue,
  onChange
}) => {
  const trackRef = useRef(null);
  const [isDragging, setIsDragging] = useState(false);
  const [isHovering, setIsHovering] = useState(false);
  const [isHoverDevice, setIsHoverDevice] = useState(false);

  const range = max - min;
  const percentage = range > 0 ? ((value - min) / range) * 100 : 0;
  const isActive = isDragging || (isHoverDevice && isHovering);

  useEffect(() => {
    const mq = window.matchMedia('(hover: hover) and (pointer: fine)');
    setIsHoverDevice(mq.matches);
    const handleChange = (e) => setIsHoverDevice(e.matches);
    mq.addEventListener('change', handleChange);
    return () => mq.removeEventListener('change', handleChange);
  }, []);

  const computeValue = useCallback(
    (clientX) => {
      const track = trackRef.current;
      if (!track) return value;
      const rect = track.getBoundingClientRect();
      const ratio = clamp((clientX - rect.left) / rect.width, 0, 1);
      const raw = min + ratio * range;
      return clamp(roundToStep(raw, step, min), min, max);
    },
    [min, max, step, range, value]
  );

  const handlePointerDown = useCallback(
    (e) => {
      if (isDisabled) return;
      e.preventDefault();
      trackRef.current?.setPointerCapture(e.pointerId);
      setIsDragging(true);
      onChange?.(computeValue(e.clientX));
    },
    [computeValue, onChange, isDisabled]
  );

  const handlePointerMove = useCallback(
    (e) => {
      if (!isDragging) return;
      onChange?.(computeValue(e.clientX));
    },
    [isDragging, computeValue, onChange]
  );