这里有一个简单的问题示例。我想在表格中图像的底部和左侧放置一个滑块。它在底部效果很好，但当滑块旋转时，样式命令中的高度和宽度参数需要反转。这似乎是滑块本身的一个错误。我只是把这个放在一张表里说明问题。表格单元格的宽度太宽！此网页的链接：https://s3.amazonaws.com/berry-genealogy/index2.html由于某些原因，下面的显示不显示表格边框或滑块。点击上面的链接查看实际页面，它是向公众开放的。
<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>
根据这篇MDN帖子https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/rangetransform可以用于旋转输入滑块，前提是它被包装在div中以帮助在渲染后调整大小。这个片段添加了所需的css并显示了效果：
.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>这个SO问题如何垂直显示范围输入滑块有一个简单的解决方案，但(根据MDN(它可能只有在FF中才可靠。它在输入标签中使用了一个非标准属性orient="vertical"：
<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>上面的MDN链接对这个问题进行了很好的讨论，并提出了解决浏览器实现之间差异的建议。
您可以执行类似的操作
<style>
.td1 {
width: 20px;
}
.slide {
transform: rotate(90deg);
padding: 0px;
margin: 0 auto;
position: absolute;
left: -42px
}
</style>
<tr>
<td><input class="slide" type='range'></td>
<td><img height=150 src="img/1.jpeg"></td>
</tr>
<tr>
<td class="td1"> </td>
<td><input type='range' style="transform:rotate(var(--r,0deg));"></td>
</tr>
</table>