HTML не работает должным образом при использовании в WebIOPi

Question

Я создал элемент управления в HTML, который будет использоваться в моей малине Pi 2 через фреймворк WebIOPi. Когда я вводил ввод диапазона типов, он выглядит нормально в HTML, но когда я убираю его на мою малиновку Pi и вижу, как это выглядит, это нехорошо.

This is how the range input looks in the HTML

And this is how it shows in my local IP address when I upload it

Как примечание, я не забыл, чтобы загрузить изменения CSS и включить его в заголовке HTML-файла.

Я добавил на вход следующим образом:

<input id="volSlider" class="asrange" type="range" min="0" max="30"/> 

и CSS:

input[type=range] { 
width: 10px; /* Specific width is required for Firefox. */ 
height: 100%; 
background: transparent; /* Otherwise white in Chrome */ 
/*transform: rotate(-90deg);*/ 
-webkit-appearance: slider-vertical; 
vertical-align: middle; 
text-align:center; 

} 

Он появляется так же, как в Firefox, Chrome и Edge.

Благодарим за любые ответы, которые вы можете мне дать.

Answer 1

Я считаю, что проблема в вашем случае - это высота, основанная на процентах. Измените это на пиксели и следуйте некоторым дополнительным советам this great answer.

input[type=range] { 
 
    width: 10px; 
 
    /* Specific width is required for Firefox. */ 
 
    height: 100px; 
 
    background: transparent; 
 
    /* Otherwise white in Chrome */ 
 
    /*transform: rotate(-90deg);*/ 
 
    -webkit-appearance: slider-vertical; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
    writing-mode: bt-lr; 
 
}

<div> 
 
    <input id="volSlider" class="asrange" type="range" min="0" max="30" orient="vertical" /> 
 
</div>