WebIOPiでHTMLを使用すると正しく動作しない

Question

HTMLでコントロールを作成し、フレームワークWebIOPiを介してRaspberry Pi 2で使用するようにしました。私がタイプ範囲の入力を導入したとき、それはHTMLでうまく見えますが、それを私のラズベリーパイにアップロードして見た目を見ると、良くありません。注意点としては

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とエッジで同じように表示されます。

お返事ありがとうございます。

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>