Estoy tratando de crear un indicador de valores que se refiera al valor y se divida en pasos similares a una barra de progreso, pero muestra el valor y qué paso se encuentra en él para reaccionar. ¿Pueden ayudarme con el enfoque o las bibliotecas que pueden ayudarme con eso?
No pude encontrar nada, incluso en bit.dev , así que armé un componente de plantilla rápido que creo que hace parte del trabajo pesado de lo que está tratando de hacer. Aquí hay una captura de pantalla de ejemplo.
Aquí está CodeSandbox y la fuente del componente.
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> ); }
Definitivamente hay algunas áreas para refinar de acuerdo con sus estándares de codificación (y dedicando más tiempo que yo) y su estado final deseado. Espero que funcione bien para lo que estás tratando de lograr.