JSFiddle - React, Tailwind, and code Playground

by Alexey Lisovy

HTML

<form class='weapon'>
  <fieldset>
    <legend>Настройка тактико-технических харрактеристик вооружения ЫЩ-35У (образца 2035 года)</legend>
    <p data-inform='Уровень зарядки:'><input name='charge' id='ch' type='number' min='0' max='6' value='6'><label for='ch'></label></p>
<p data-inform='Убойная сила:'><input name='power'id='pw' type='number' min='0' max='6' value='3'><label for='pw'></label></p>
<p data-inform='Перезарядка:'><input name='speed' id='sp' type='number' min='0' max='6' value='1'><label for='sp'></label></p>
  </fieldset>
</form>

CSS

.weapon
    {
        --pground: RGB(135, 143, 148);
        --zero-ground: RGB(212, 212, 212);
        
        --begining: RGB(81, 219, 179);
        --middle: RGB(219, 214, 81);
        --finish: RGB(219, 143, 81);
    }
.weapon p
    {
        height: 40px;
        float: left;
        width: 420px;
        background: linear-gradient(-60deg, transparent 4%, var(--pground) 4%,  var(--pground) 96%, transparent 96%);
        position: relative;
    }
.weapon p::before
    {
        content: attr(data-inform);
        color: white;
        line-height: 40px;
        padding-left: 20px;
        padding-right: 10px;
    }
.weapon input[type='number']
    {
        width: 35px;
        position: absolute;
        right: calc(50% + 29px);
        top: 30%;
    }
 .weapon p label
     {
        display: block;
        position: absolute;
        height: 50%; width: 50%;
        top: 30%; right: 20px;
        background: linear-gradient(-60deg, transparent 6%,
             var(--zero-ground) 6%,  var(--zero-ground) 16%,
             transparent 16%, transparent 21.6%,
             var(--zero-ground) 21.6%, var(--zero-ground) 31.6%,
             transparent 31.6%, transparent 37.2%,
             var(--zero-ground) 37.2%, var(--zero-ground) 47.2%,
             transparent 47.2%, transparent 52.8%,
             var(--zero-ground) 52.8%, var(--zero-ground) 62.8%,
             transparent 62.8%, transparent 68.4%,
             var(--zero-ground) 68.4%, var(--zero-ground) 78.4%,
             transparent 78.4%, transparent 84%,
             var(--zero-ground) 84%, var(--zero-ground) 94%,
             transparent 94%  );
     }
 .weapon input[value = '1'] + label
     {
        background: linear-gradient(-60deg, transparent 6%,
             var(--zero-ground) 6%,  var(--zero-ground) 16%,
             transparent 16%, transparent 21.6%,
             var(--zero-ground) 21.6%, var(--zero-ground) 31.6%,
             transparent 31.6%, transparent 37.2%,
            ...