Lift State Up

React

Junior

State managementUnidirectional data flow

Requirements:

Create a Percentage Controller made of two sibling sliders that both control one shared percentage number.

Behaviour:

Start with a value of 50%.
Moving either slider must instantly update both thumbs and the fill of a horizontal bar.

UI structure & test-ids:

Each slider is an <input type="range" min="0" max="100">
- First slider → data-testid="slider-1"
- Second slider → data-testid="slider-2"
The bar:
- Outer wrapper → data-testid="bar"
- Inner fill element → data-testid="bar-fill" with inline style width: "${percentage}%".

Note:

Do not edit data-testid attributes on any element as they are 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

Lift State Up

React

Junior

State managementUnidirectional data flow

Requirements:

Create a Percentage Controller made of two sibling sliders that both control one shared percentage number.

Behaviour:

Start with a value of 50%.
Moving either slider must instantly update both thumbs and the fill of a horizontal bar.

UI structure & test-ids:

Each slider is an <input type="range" min="0" max="100">
- First slider → data-testid="slider-1"
- Second slider → data-testid="slider-2"
The bar:
- Outer wrapper → data-testid="bar"
- Inner fill element → data-testid="bar-fill" with inline style width: "${percentage}%".

Note:

Do not edit data-testid attributes on any element as they are 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