Dwinzo_dev/app/src/components/ui/inputs/InputRange.tsx

import React, { useEffect, useState } from "react";
import * as CONSTANTS from "../../../types/world/worldConstants";
interface InputToggleProps {
  label: string; // Represents the toggle state (on/off)
  min?: number;
  max?: number;
  onClick?: () => void; // Function to handle toggle clicks
  onChange?: (value: number) => void; // Function to handle toggle clicks
  disabled?: boolean;
  value?: number;
  onPointerUp?: (value: number) => void;
}

const InputRange: React.FC<InputToggleProps> = ({
  label,
  onClick,
  onChange,
  min,
  max,
  disabled,
  value,
  onPointerUp,
}) => {
  const [rangeValue, setRangeValue] = useState<number>(value ? value : 5);

  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
    const newValue = parseInt(e.target.value); // Parse the value to an integer

    setRangeValue(newValue); // Update the local state

    if (onChange) {
      onChange(newValue); // Call the onChange function if it exists
    }
  }
  useEffect(() => {
    value && setRangeValue(value);
  }, [value]);
  function handlePointerUp(e: React.PointerEvent<HTMLInputElement>) {
    const newValue = parseInt(e.currentTarget.value, 10); // Parse value correctly

    if (onPointerUp) {
      onPointerUp(newValue); // Call the callback function if it exists
    }
  }
  function handlekey(e: React.KeyboardEvent<HTMLInputElement>) {
    const newValue = parseInt(e.currentTarget.value, 10); // Parse value correctly

    if (onPointerUp) {
      onPointerUp(newValue); // Call the callback function if it exists
    }
  }

  return (
    <div className="input-range-container">
      <label
        htmlFor={`range-input ${value}`}
        className="label"
        onClick={onClick}
      >
        {label}
      </label>
      <div className="input-container">
        <input
          id={`range-input ${value}`}
          type="range"
          min={min}
          max={max}
          onChange={handleChange}
          disabled={disabled}
          value={rangeValue}
          onPointerUp={handlePointerUp}
        />
        <input
          type="number"
          min={min}
          className="input-value"
          max={max}
          value={rangeValue}
          onChange={handleChange}
          disabled={disabled}
          onKeyUp={(e) => {
            if (e.key === "ArrowUp" || e.key === "ArrowDown") {
              console.log("e.key: ", e.key);
              handlekey(e);
            }
          }}
        />
      </div>
    </div>
  );
};

export default InputRange;