Implement a "Scrolling-Bar/Numeric Bar" that changes position based on numeric value

[RahulKhanna14]

In the College App case study, our interactive essay activity has users change certain words in a given essay to output a "score", denoting how male or female leaning the overall essay is. Since this "score" is ambiguous, we'd like to change it to be a scrolling/sliding bar, that changes position based on the numerical score.

The current version looks like:

We'd like the final version to be something like:

where the circle in the middle slides left and right based on the numeric score.

---

You could implement this using react useEffects/hooks, or alternatively, there's likely some React library that could be used for this.