values Indicator in react

user_8773450 0
Viewed 36

I'm trying to build a values indicator that refers to value and is divided into steps similar to a progress bar but it shows the value and which step is in it in react. can you help with approach or libraries that can help me with that.

it should looks something like this enter image description here

reactjs progress-bar css html javascript
1 Answers

I couldn't find anything, including on bit.dev, so I threw together a quick template component which I think does some of the heavy-lifting of what you are trying to do. Here is an example screenshot.

progress bar component example

Here is the CodeSandbox and the source for the component.

function Progress({
  steps = [0, 5, 10, 20],
  width = 300,
  value = Math.min(steps ?? []) ?? 0
}) {
  const filledAmount = (index) => {
    return Math.max(
      Math.min(
        (100 * (value - steps[index])) / (steps[index + 1] - steps[index]),
        100
      ),
      0
    );
  };

  const amountComplete = (100 * value) / (steps[steps.length - 1] - steps[0]);

  return (
    <div className="progress-container" style={width ? { width } : {}}>
      <div className="progress-top-row">
        <p
          className="progress-text"
          style={{
            marginLeft: `${amountComplete}%`,
            transform: "translateX(-50%)"
          }}
        >
          {value}
        </p>
      </div>
      <div
        className="progress-middle-row"
        style={width ? { width: width } : {}}
      >
        {[...steps].slice(1).map((s, i) => (
          <div key={s} className="bar-slice">
            <div
              className="filled-slice"
              style={{ width: `${filledAmount(i)}%` }}
            ></div>
          </div>
        ))}
      </div>
      <div className="progress-bottom-row">
        {steps.map((s) => (
          <div key={s} className="progress-label">
            <p>{s}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

There are definitely some areas to refine according to your coding standards (and putting more time into it than I will) and your desired end state. I hope it works well for what you are trying to accomplish.

user_140774910
Related