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.

Solution

Your vertical slider is now just a horizontal slider that is 350px high and 25px wide. It tries to slide left-to-right but there's no room for it.

There are different ways of creating vertical sliders. I've opted for a bit of a hacky one that was the easiest to style. In the example below, I've:

Changed your vertical slider to be 25px high and 350px wide,
Rotated it by 90 degrees so it appears vertical

To position the sliders correctly, I've used a CSS grid.

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

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;

vSlider.min = 0;
vSlider.max = h - 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;
  y = vSlider.value;

}

//Start moving


setInterval(draw, 30);

.myCanvSlide {
  display: grid;
  gap: 10px;
  grid-template-columns: 25px 350px;
  grid-template-rows: 25px 350px;
  grid-template-areas:
    ".       hSlider"
    "vSlider canvas"  
 
}

.vertical-slider {
  grid-area: vSlider;
}

.horizontal-slider {
  grid-area: hSlider;
}

.canvas {
  grid-area: canvas;
  border: 1px solid #000000;
}

.vSlider {
  -webkit-appearance: none;
  appearance: none;
  width: 350px;
  height: 25px;
  transform: translateX(25px) rotateZ(90deg);
  transform-origin: top left;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
  margin: 0;
}

.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;
  margin: 0;
}

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

<div class="myCanvSlide">

  <div class="vertical-slider">

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

  </div>


  <canvas id="canvas" class="canvas" width="350" height="350"></canvas>


  <div class="horizontal-slider">

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

  </div>

</div>