Установка минимального значения в 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%
→ Ссылка