Ausrichtung des Gewichtsbalkens ⇐ HTML

[Anonymous]

Ich baue einen gesunden Gewichtsrechner. Ich habe eine Gradientengewichtsleiste mit Markern hinzugefügt, die unterschiedliche Gewichtskategorien und ihr jeweiliges Gewicht darstellen. Aber ich kann seine Position nicht richtig machen. Mein Taschenrechner berechnet das Gewicht dynamisch..weight-bar-container {
width: 90%;
max-width: 350px;
background: linear-gradient(to right, red, orange, green, yellow, orange, red);
height: 30px;
margin: 20px auto;
position: relative;
}

.weight-marker {
position: absolute;
top: -5px;
width: 1px;
height: 40px;
background: black;
border-radius: 2px;
transition: left 0.3s ease;
}

.weight-labels {
display: flex;
justify-content: space-between;
margin-top: 5px;
font-size: 12px;
color: #333;
}

.marker::before {
content: '\25BC';
/* Downward triangle */
display: block;
text-align: center;
}< /code>
Healthy Weight Range:





Severely Underweight
Underweight
Healthy
Overweight
Obese Class I
Obese Class II
Obese Class III

< /code>
< /div>
< /div>
< /p>
Gewichtsbalken -Screenshot: < /p>
Ich möchte, dass das mit Balken und Gewicht der verschiedenen Kategorien markierten markierten Kennzeichen und erwarteten Kategorien über den Gradientenbalken angezeigt werden. src = "https://i.static.net/0kqfcknc.png"/>
Wie kann ich das beheben?