Как сделать две полосы прокрутки, разделяющих одно и то же левое положение красного шарика в диагональном графике в HTML ⇐ Html

[Anonymous]

У меня есть проблемы в HTML и CSS. Мне нужно сделать график, на котором красный шарик идет вверх и вниз по диагонали, и он должен следовать по положению x синей линии (этот элемент движется только вправо или влево). Проблема в том, что прокрутка полоса 1 и 2 разделяют левое положение красного шарика ... так что оно в конечном итоге, и они возвращаются к позиции в процентах от соответствующей полосы прокрутки.
Как мне сделать обоих Они имеют одинаковое левое положение красного шара? class = "Snippet-Code-JS Lang-JS PrettyPrint-Override">

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

document.addEventListener("DOMContentLoaded", function () {

const scrollBar1 = document.getElementById("scroll-bar1");
const scrollBar2 = document.getElementById("scroll-bar2");
const scrollBar3 = document.getElementById("scroll-bar3");
const scrollBar4 = document.getElementById("scroll-bar4");
const scrollBar5 = document.getElementById("scroll-bar5");
const scrollBar6 = document.getElementById("scroll-bar6");

const redBall = document.getElementById("red-ball");
const blueLine = document.getElementById("blue-line");

let leftBall

scrollBar1.addEventListener("input", function() {
// Verifica se o valor da scroll bar 1 foi alterado
if (scrollBar1.value !== scrollBar1.previousValue) {

const xPercentage = (scrollBar1.value - 100) / (200 - 100);
const xPosition = xPercentage * 100;
leftBall = xPosition
redBall.style.left = `${leftBall}%`;

// Atualiza a posição da bola vermelha na vertical (scroll bar 1)
const yPercentage = (scrollBar1.value - 100) / (200 - 100);
const yPosition = yPercentage * 100;
redBall.style.top = `${yPosition}%`;

console.log(redBall.style.left)

}
});

scrollBar2.addEventListener("input", function() {
// Verifica se o valor da scroll bar 1 foi alterado
if (scrollBar2.value !== scrollBar2.previousValue) {

const blueLinePercentage = (scrollBar2.value - 400) / (0 - 400);
const blueLinePosition = blueLinePercentage * 100;
//leftBall = blueLinePosition
blueLine.style.left = `${80 - blueLinePosition}%`;
redBall.style.left = `${100-blueLinePosition}%`;
console.log(redBall.style.left)
}
});
});< /code>
.container {
text-align: center;
}

#chart {
position: relative;
width: 450px;
height: 450px;
margin: 0 auto;
background-color: #f2f2f2;
border: 1px solid #ccc;
}

#red-ball {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 20px;
height: 20px;
background-color: red;
border-radius: 50%;
transform: rotate(45deg);
}

#black-line {
position: absolute;
top: 50%;
left: 30%;
transform: translateY(-50%, -50%);
width: 40%;
height: 2px;
background-color: black;
transform: rotate(45deg);
}

#blue-line {
position: absolute;
top: 50%;
left: 30%;
transform: translateY(-50%, -50%);
width: 40%;
height: 2px;
background-color: blue;
transform: rotate(45deg);
}

#x-axis {
position: absolute;
bottom: -20px;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
}

#y-axis {
position: absolute;
top: 0;
left: -30px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}

.axis-label {
font-size: 12px;
}

.scroll-bar {
margin: 20px auto;
width: 400px;
display: flex;
align-items: center;
}

.scroll-bar input[type="range"] {
flex-grow: 1;
}

.scroll-bar-value {
margin-left: 10px;
font-size:  12px;
}< /code>






Gráfico de Demanda por Carne Moída




Gráfico de Demanda por Carne Moída



6,292
10,292
14,292

90
140
190

Подробнее здесь: https://stackoverflow.com/questions/763 ... ll-in-a-di