HTML and JavaScript to create two range sliders, one for X and Y and another for A and B. The values of Y and B are updated in real-time as the sliders for X and A are moved and displayed, and the sum of Y and B is also displayed. X : 10 11 12 13 14 15 16 Y : 2000 2100 2300 2500 2600 2700 2800 and another to control the A and B. A : 100 110 120 130 140 150 160 B : 200 200 300 500 600 700 800 while slider X and A active display value Y and B and display summation X-Y slider and A-B slider must separate control
<html>
<head>
<script>
function updateValueX() {
let x = document.getElementById("sliderX").value;
document.getElementById("valueX").innerHTML = x;
let y = 0;
switch(x) {
case "10": y = 2000; break;
case "11": y = 2100; break;
case "12": y = 2300; break;
case "13": y = 2500; break;
case "14": y = 2600; break;
case "15": y = 2700; break;
case "16": y = 2800; break;
}
document.getElementById("valueY").innerHTML = y;
updateSum();
}
function updateValueA() {
let a = document.getElementById("sliderA").value;
document.getElementById("valueA").innerHTML = a;
let b = 0;
switch(a) {
case "100": b = 200; break;
case "110": b = 200; break;
case "120": b = 300; break;
case "130": b = 500; break;
case "140": b = 600; break;
case "150": b = 700; break;
case "160": b = 800; break;
}
document.getElementById("valueB").innerHTML = b;
updateSum();
}
function updateSum() {
let y = parseInt(document.getElementById("valueY").innerHTML);
let b = parseInt(document.getElementById("valueB").innerHTML);
document.getElementById("sum").innerHTML = y + b;
}
</script>
</head>
<body>
<h3>X-Y Slider</h3>
<p>X: <span id="valueX">10</span></p>
<input type="range" id="sliderX" min="10" max="16" step="1" value="10" oninput="updateValueX()">
<p>Y: <span id="valueY">2000</span></p>
<br>
<h3>A-B Slider</h3>
<p>A: <span id="valueA">100</span></p>
<input type="range" id="sliderA" min="100" max="160" step="10" value="100" oninput="updateValueA()">
<p>B: <span id="valueB">200</span></p>
<br>
<h3>Sum of Y and B</h3>
<p id="sum">2200</p>
</body>
</html>
OK<!DOCTYPE html>
<html>
<head>
<style>
.slider {
width: 400px;
margin: 20px auto;
}
.slider p {
text-align: center;
margin: 20px 0;
}
.slider-container {
display: flex;
justify-content: space-between;
}
</style>
</head>
<body>
<div class="slider">
<h3>Range Slider for X and Y</h3>
<div class="slider-container">
<p>X: <span id="x-value">10</span></p>
<input type="range" min="10" max="16" value="10" id="x-slider">
<p>Y: <span id="y-value">2000</span></p>
</div>
</div>
<div class="slider">
<h3>Range Slider for A and B</h3>
<div class="slider-container">
<p>A: <span id="a-value">apple</span></p>
<input type="range" min="0" max="6" value="0" id="a-slider">
<p>B: <span id="b-value">100</span></p>
</div>
</div>
<p>Sum of Y and B: <span id="sum-value"></span></p>
<script>
const xSlider = document.getElementById("x-slider");
const xValue = document.getElementById("x-value");
const yValue = document.getElementById("y-value");
const yValues = [2000, 2100, 2300, 2500, 2600, 2700, 2800];
xSlider.addEventListener("input", function() {
xValue.innerHTML = this.value;
yValue.innerHTML = yValues[this.value - 10];
updateSum();
});
const aSlider = document.getElementById("a-slider");
const aValue = document.getElementById("a-value");
const bValue = document.getElementById("b-value");
const bValues = [100, 110, 120, 130, 140, 150, 160];
aSlider.addEventListener("input", function() {
aValue.innerHTML = ["apple", "pine", "car", "cat", "dog", "bird", "fish"][this.value];
bValue.innerHTML = bValues[this.value];
updateSum();
});
function updateSum() {
const sumValue = document.getElementById("sum-value");
sumValue.innerHTML = parseInt(yValue.innerHTML) + parseInt(bValue.innerHTML);
}
</script>
</body>
</html>