html width and height bug on <input type='range'> when rotated

Issue

Here is a simple example of the problem.
I want to put a slider on the bottom and left side of an image in a table.
It works great on the bottom, but the height and width parameters in the style command need reversed when the slider is rotated. This seems to be a bug in the slider itself.
I just put this in a table to show the problem. Width in the table cell is too wide !
Link to this web page: https://s3.amazonaws.com/berry-genealogy/index2.html
The display below does not show the table borders for some reason, or the sliders.
Click the link above to see the actual page, it is open to public.

<pre>
<!DOCTYPE html>
  <html>
    <body>
      <table border="1">
        <tr> 
          <td>
            <input type='range' style=`width:5px;height:150px;transform:rotate(var(--r,90deg));`>
          </td>
          <td>
            <img height=150 src="https://s3.amazonaws.com/berry-genealogy/00092_0.jpg"
          </td>
        </tr>
        <tr>
          <td></td>
          <td>
            <input type='range' style=`width:100px;height:10px;transform:rotate(var(--r,0deg));`>
          </td>
        </tr>
      </table>
    </body>
  </html>
</pre>

Solution

According to this MDN post https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range transform can be used to rotate an input slider, provided it is wrapped in a div to help the sizing after render. This snippet has the required css added and shows the effect:

.slider-wrapper {
  display: inline-block;
  width: 24px;
  height: 150px;
  padding: 2px;
}

.slider-wrapper input {
  width: 150px;
  height: 20px;
  margin: 0;
  transform-origin: 75px 75px;
  transform: rotate(-90deg);
}
<table border="1">
<tbody><tr> 
    <td ><div class="slider-wrapper"><input type="range" ></div></td>
    <td><img src="https://s3.amazonaws.com/berry-genealogy/00092_0.jpg" <="" td="" height="150">
</td></tr>
<tr>
    <td></td>
    <td><input type="range"></td>
</tr>

</tbody></table>

This SO question How to display a range input slider vertically has an answer with a simple solution but (according to MDN) it may only be reliable in FF. It uses a non-standard attribute orient="vertical" inside the input tag :

<table border="1">
<tbody><tr> 
    <td ><input type="range" orient="vertical"></td>
    <td><img src="https://s3.amazonaws.com/berry-genealogy/00092_0.jpg" <="" td="" height="150">
</td></tr>
<tr>
    <td></td>
    <td><input type="range"></td>
</tr>

</tbody></table>

The MDN link above has a good discussion of this problem and a suggestion for covering differences between browser implementations.

Answered By – Dave Pritlove

Answer Checked By – Senaida (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.