first commit

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

@@ -0,0 +1,93 @@
+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;