HTML does not work properly when used in WebIOPi

Question

I made a control in HTML to be used in my Raspberry Pi 2 through the framework WebIOPi. When I introduced a type range input, it looks ok in the HTML, but when I ulpload it to my Raspberry Pi and see how it looks, is not good.

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

As a note, I did not forget to upload the CSS modifications and include it in the header of the HTML file.

I added the input the following way:

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

and the 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;

}

It appears the same way in Firefox, Chrome and Edge.

Thank you for any answers you can give me.

Answer 1

I believe the issue in your case is the height based on percent. Change that to pixels and follow some additional tips form 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>