将垂直滑块放在 html 对象的左侧或右侧答案

【问题标题】：Put a vertical slider to the left or right of an html object将垂直滑块放在 html 对象的左侧或右侧
【发布时间】：2020-08-31 07:31:36
【问题描述】：

我有一个显示视频的画布，我想将一个范围滑块绑定到它的左侧或右侧。事实证明，CSS 在这方面确实与我抗争。我可以处理拉伸或滑块值，但仅将其绑定到画布的一侧是非常困难的。任何帮助是极大的赞赏。如果使用水平滑块更容易解释，我还将绑定一个到底部，可能更简单，因为我没有旋转滑块的样式。

HTML：

<div class="centerVideo">
  <canvas id="video-canvas" style="width: 1024px; height: 576px"></canvas>


    <div style="float: right; position: fixed;">
        <form name="verticalForm">
            <output name="verticalValue" for="verticalRange" id="verticalLabel" style="font-size:22px;">Tilt: </output>

            <span style="font-size:12px;">0</span>


            <input type="range" style="transform:rotate(270deg);" name="verticalInput" id="verticalID" value="0" min="-90" max="0" oninput="tilt(this.value)">
             <script>
                    function tilt(val) {
                       //do stuff
                    }
                    </script>
                    <br>
                    <span style="font-size:12px;">-90</span>
        </form>
    </div>
</div>

CSS：

.centerVideo {
  margin: 0;
  position: absolute;
  top: 30%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

【问题讨论】：

标签： javascript html css html5-canvas range

【解决方案1】：

这是一个 Codepen https://codepen.io/thisisloop/pen/gOaBLjE 我将您的 Slider 添加到屏幕左侧，并向滑块 div 添加了一个类。在这个类中我添加了：

position: relative;
right: 15%; //for changing the horizontal position can also use "left:"
bottom: 510px; //for changing the vertical position can also use "top:"

如果你使用 flexbox 或 grid，你可以做得更干净，这里有一些很好的资源可以学习： https://css-tricks.com/snippets/css/complete-guide-grid/ https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 这些对于制作良好的布局至关重要。

希望能帮到你

【讨论】：