Positioning for sliders and canvas

I’m having difficulties with positioning my sliders correctly.
I also can’t seem to make the vertical-slider work(the slide head won’t move).

My Codes:

var hSlider = document.getElementById("myRange");

var output = document.getElementById("demo");

output.innerHTML = hSlider.value;

//Vertikal slider

const vSlider = document.getElementById("vertSlider");

vSlider.addEventListener("input", function() {

  console.log("Slider value:", this.value);

});

//Bunch of variables

var canv =

  document.getElementById("canvas");

var ctx = canv.getContext("2d");

var x = 0;

var y = 0;

var w = canv.width;

var h = canv.height;

var r = 100;

var g = 0;

var b = 50;

const rz = 50;

hSlider.min = 0

hSlider.max = w - rz;

//At the start: load the rectangle

ctx.fillStyle = "rgb(" + r + "," + g + "," + b + ")";

ctx.fillRect(0, 0, 50, 50);

//Move rectangle function

function draw() {

  ctx.clearRect(0, 0, w, h);

  ctx.fillStyle = "rgb(" + r + "," + g + "," + b + ")";

  ctx.fillRect(x, y, rz, rz);

  x = hSlider.value;

}

//Start moving

hSlider.oninput = function() {

  output.innerHTML = this.value;

  setInterval(draw, 30);

}
.myCanvSlide {
  display: flex;
}

.vertical-slider {
  height: 350px;
  align-items: center;
  float: left;
}

.horizontal-slider {
  width: 350px;
  float: left;
}

.canvas {
  border: 1px solid #000000;
  width: 350px;
  height: 350px;
  float: left;
}

.vSlider {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 100%;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.vSlider:hover {
  opacity: 1;
}

.vSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #04AA6D;
  cursor: pointer;
}

.vSlider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #04AA6D;
  cursor: pointer;
}

.hSlider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 25px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.hSlider:hover {
  opacity: 1;
}

.hSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #04AA6D;
  cursor: pointer;
}

.hSlider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #04AA6D;
  cursor: pointer;
}
<body>

  <div class="myCanvSlide">

    <!--Vertikal slider, to the right of the canvas-->

    <div class="vertical-slider">

      <input type="range" min="1" max="100" value="1" class="vSlider" id="vertSlider">

    </div>

    <!--Canvas for animations and such-->

    <canvas id="canvas" class="canvas" width="300" height="300" style="border:1px solid #000000;">

  </canvas>

    <!--Horizontal slider, under canvas-->

    <div class="horizontal-slider">

      <input type="range" min="1" max="100" value="1" class="hSlider" id="myRange">

    </div>

  </div>

  <script src="script.js"></script>

</body>

I have tried without the myCanvSlide div, and I tried switching around the float / clear tags in the CSS code.
My other issue is that the vertical slider doesn’t work. I should be able to move the slide head up and down but it’s just stuck in the middle.