React: Прогресс‑бар по значению input

Сделайте управляемый input (0–100), который заполняет прогресс‑бар на соответствующий процент. Некорректные значения нужно клампить в диапазон.

Бизнес-кейс. LoadMeter — индикатор загрузки команды: вводишь процент — видишь прогресс.

Что сделать

Управлять значением через состояние, обновлять по onChange.
Ограничить диапазон: от 0 до 100.
Менять ширину полосы по значению, показывать текст процента рядом.

Как выглядит

Карточка с числовым полем, полосой прогресса и процентом. Превью: UI прогресс‑бар

💡 Подсказка

Состояние: const [value, setValue] = useState(0).
В обработчике: let n = parseInt(e.target.value, 10) || 0; n = Math.min(100, Math.max(0, n)); setValue(n);.
Стиль заливки: style={{ width: value + '%' }}.
Тип инпута: type="number" с min/max.

👀 Решение

import React, { useState } from 'react';
import './styles.css';
 
export function ProgressInput() {
  const [value, setValue] = useState(0);
 
  function handleChange(e) {
    const raw = e.target.value;
    if (raw === '') {
      setValue(0);
      return;
    }
    let n = parseInt(raw, 10);
    if (isNaN(n)) n = 0;
    n = Math.max(0, Math.min(100, n));
    setValue(n);
  }
 
  const fillStyle = { width: value + '%' };
 
  return (
    <article className="card" data-testid="progress-card">
      <header>
        <h2 className="title">LoadMeter: прогресс по вводу</h2>
        <p className="subtitle">Ввод числа 0–100 управляет шириной полосы</p>
      </header>
 
      <div className="row">
        <input
          className="input"
          type="number"
          min={0}
          max={100}
          placeholder="Введите число от 0 до 100"
          value={value}
          onChange={handleChange}
          aria-label="value"
        />
 
        <div className="progress">
          <div className="progress-track" aria-label="progress-track">
            <div className="progress-fill" style={fillStyle} aria-label="progress-fill" />
          </div>
          <span className="percent" aria-label="percent">{value}%</span>
        </div>
      </div>
    </article>
  );
}
 
export default function App() {
  return (
    <main className="challenge-container">
      <section>
        <ProgressInput />
      </section>
    </main>
  );
}

Что сделать

Как выглядит

React: Прогресс‑бар по значению input

Что сделать

Как выглядит

🧑‍💻 Это не баг! Это фича!