49 lines
1.2 KiB
TypeScript
49 lines
1.2 KiB
TypeScript
'use client';
|
|
import { Dispatch, FC, SetStateAction } from 'react';
|
|
import styles from '@/components/ui/modal-exchange/ModalExchange.module.css';
|
|
|
|
interface IRangeInput {
|
|
isDecimal: boolean;
|
|
balance: number | undefined;
|
|
amount: number;
|
|
priceItem: number;
|
|
rangeRef: React.RefObject<HTMLInputElement>;
|
|
setAmount: Dispatch<SetStateAction<number>>;
|
|
}
|
|
|
|
const RangeInput: FC<IRangeInput> = ({
|
|
isDecimal,
|
|
balance,
|
|
priceItem,
|
|
amount,
|
|
rangeRef,
|
|
setAmount,
|
|
}) => {
|
|
const handleRangeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
let value = parseFloat(e.target.value);
|
|
if (!isDecimal) {
|
|
value = Math.round(value / priceItem) * priceItem;
|
|
} else {
|
|
value = parseFloat(value.toFixed(6));
|
|
}
|
|
setAmount(value);
|
|
};
|
|
|
|
return (
|
|
<div className={styles.inputRange}>
|
|
<input
|
|
type='range'
|
|
id='amountRange'
|
|
min='0'
|
|
max={balance}
|
|
step={isDecimal ? '0.000001' : priceItem.toString()}
|
|
value={amount}
|
|
onChange={handleRangeChange}
|
|
ref={rangeRef}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default RangeInput;
|