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

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>

CodePudding user response：

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 ><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.

CodePudding user response：

You can do something like this

    <style>
        .td1 {
            width: 20px;
        }

        .slide {
            transform: rotate(90deg);
            padding: 0px;
            margin: 0 auto;
            position: absolute;
            left: -42px
        }
    </style>
    <tr>
        <td><input  type='range'></td>
        <td><img height=150 src="img/1.jpeg"></td>

    </tr>
    <tr>

        <td > </td>
        <td><input type='range' style="transform:rotate(var(--r,0deg));"></td>

    </tr>



</table>