I'm struggling to bind a range slider to the left or right side of a canvas that displays video. Despite my efforts, CSS seems to be putting up a strong fight. I can handle issues like stretching and slider values, but attaching it to the canvas is proving to be quite challenging. Any assistance would be greatly appreciated. If explaining with a horizontal slider would make it easier, I also plan to attach one to the bottom which might be simpler since there won't be any style rotation involved.
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%);
}