изменение высоты фона с помощью повторяющегося линейного градиента

Question

У меня есть этот «полосатый фон» на входе типа = «диапазон». Полосы вертикальны. Я не могу контролировать высоту фона (высота полосы). Когда я изменяю значение background height, высота остается на 100% от входного типа = «диапазон». Вы можете помочь?

HTML:

<form oninput="amount.value=userlevelofsurfing.value"> 
       <div class="range"> 
        <input id="levelrange" type="range" min="0" max="10" value="5" name="userlevelofsurfing"> 
       <output id="levelrangeoutput" name="amount" for="userlevelofsurfing">5</output> 
    </div> 
</form> 

CSS:

#levelrange { 
background: repeating-linear-gradient(
    to right, 
    rgba(255,255,255,0), 
    rgba(255,255,255,0) 10%, 
    #06b4c8 10%, 
    #06b4c8 30%, 
    rgba(255,255,255,0) 30%, 
    rgba(255,255,255,0) 100% 
); 
background-size: 9.7% 5px; 
} 

Answer 1

Вы можете контролировать высоту полосы, указав высоту этого элемента:

#levelrange { 
 
    background: repeating-linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 10%, #06b4c8 10%, #06b4c8 30%, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0) 100%); 
 
    background-size: 9.7% 5px; 
 
    height:200px; 
 
}

<form oninput="amount.value=userlevelofsurfing.value"> 
 
    <div class="range"> 
 
     <input id="levelrange" type="range" min="0" max="10" value="5" name="userlevelofsurfing" /> 
 
     <output id="levelrangeoutput" name="amount" for="userlevelofsurfing">5</output> 
 
    </div> 
 
</form>