Lift State Up

React

Junior

State managementUnidirectional data flow

Build a Percentage Controller with two sibling sliders that both control one shared percentage, reflected in a horizontal bar.

Requirements

Initial value is 50%.
Each slider is an <input type="range" min="0" max="100"> with data-testid="slider-1" and data-testid="slider-2".
Moving either slider instantly updates both thumbs and the bar fill.
Bar wrapper is data-testid="bar", inner fill is data-testid="bar-fill" with inline style width: "${percentage}%".

Notes

Do not edit data-testid attributes (used for testing).

App.js

import PercentageController from "./PercentageController";

export default function App() {
  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-50 p-6">
      <PercentageController />
    </div>
  );
}

Browser

JavaScript Console

console.log()

statements will appear here

AI Analyzer