Установка минимального значения в Input, ReactJS
Как установить минимальное значение в input type=range?
Это значение дается в процентах const minmaxinitial = { minValue: 10, maxValue: 60 };
import "./styles.css";
import { useState } from "react";
const minmaxprice = {
minValue: '1000000',
maxValue: '6000000'
};
const minmaxinitial = {
minValue: '10',
maxValue: '60'
};
export default function App() {
const getTotalSum = () => {
let total_sum = {
car_coast: minmaxprice.minValue,
initial_payment: minmaxinitial.minValue,
total_sum: 0
};
return total_sum;
};
const [totalSum, setTotalSum] = useState(getTotalSum);
const handleInputChange = (prop, e) => {
setTotalSum({
...totalSum,
[prop]: e.target.value.replace(/[^0-9]/g, ""),
total_sum: sum
});
};
const sum = totalSum.car_coast - totalSum.initial_payment;
console.log(totalSum.initial_payment);
return (
<div>
<h4>Стоимость автомобиля</h4>
<input
type="text"
maxLength={String(minmaxprice.maxValue).length}
onChange={(e) => handleInputChange("car_coast", e)}
value={totalSum.car_coast
.replace(/\B(?=(\d{3})+(?!\d))/g, " ")}
/>
<input
type="range"
min={minmaxprice.minValue}
max={minmaxprice.maxValue}
onChange={(e) => handleInputChange("car_coast", e)}
value={totalSum.car_coast}
/>
<h4>Первоначальный взнос</h4>
<input
type="text"
minLength={String(totalSum.min_initial_percent).length}
maxLength={String(totalSum.car_coast).length}
onChange={(e) => handleInputChange("initial_payment", e)}
value={totalSum.initial_payment
.replace(/\B(?=(\d{3})+(?!\d))/g, " ")}
/>
<input
type="range"
// min={(totalSum.car_coast / 100) * minmaxinitial.minValue}
max={(totalSum.car_coast / 100) * minmaxinitial.maxValue}
onChange={(e) => handleInputChange("initial_payment", e)}
value={totalSum.initial_payment}
/>
<h4>Сумма остатка: {sum}</h4>
</div>
);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
Ответы (1 шт):
Автор решения: ksa
→ Ссылка
Это значение дается в процентах const minmaxinitial = { minValue: 10, maxValue: 60 };
В процентах от чего? Обычная пропорция:
x = 10%
<что-то> = 100%
---
x = (10% * <что-то>) / 100%