70 lines
1.7 KiB
TypeScript
70 lines
1.7 KiB
TypeScript
|
import React, { useEffect, useState } from "react";
|
||
|
|
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
|
||
|
|
const InputRange: React.FC<InputToggleProps> = ({
|
||
|
|
label,
|
||
|
|
onClick,
|
||
|
|
onChange,
|
||
|
|
min = 0,
|
||
|
|
max = 10,
|
||
|
|
disabled,
|
||
|
|
value = 5,
|
||
|
|
}) => {
|
||
|
|
const [rangeValue, setRangeValue] = useState<number>(value);
|
||
|
|
|
||
|
|
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(() => {
|
||
|
|
setRangeValue(value);
|
||
|
|
}, [value]);
|
||
|
|
|
||
|
|
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}
|
||
|
|
/>
|
||
|
|
<input
|
||
|
|
type="number"
|
||
|
|
min={min}
|
||
|
|
className="input-value"
|
||
|
|
max={max}
|
||
|
|
value={rangeValue}
|
||
|
|
onChange={handleChange}
|
||
|
|
disabled={disabled}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default InputRange;
|