Расположение ползунков и холста ⇐ CSS

[Anonymous]

У меня возникли трудности с правильным расположением ползунков.
Я также не могу заставить работать вертикальный ползунок (головка слайдера не двигается).
Мои коды:


< pre class="snippet-code-js lang-js Prettyprint-override">

Код: Выделить всё

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

Код: Выделить всё

Я пробовал без элемента div myCanvSlide и пробовал переключаться между плавающим элементом / очистите теги в коде CSS.
Другая проблема заключается в том, что вертикальный ползунок не работает. У меня должна быть возможность перемещать направляющую головку вверх и вниз, но она просто застряла посередине.

Подробнее здесь: https://stackoverflow.com/questions/782 ... and-canvas