please creates two range sliders, one to control the value of X and Y,
X : 10 11 12 13 14 15 16
Y : 2000 2100 2300 2500 2600 2700 2800
and another to control the value X and B.
X : 10 11 12 13 14 15 16
B : 200 200 300 500 600 700 800 The value of X is the same value and while slide the value of X and B then sum of Y and B is displayed in a separate field and is updated as you move either of the sliders.
1 สไลด์
อายุ : เบี้ย/ทุนประกัน1แสน
อายุ : เบี้ย ของสุขภาพ
<html>
<head>
<script>
function showValue(newValue) {
document.getElementById("range").innerHTML = newValue;
var x = newValue;
var y = 0;
var b = 0;
var yb = 0;
if (x == 10) {
y = 2000;
b = 200;
} else if (x == 11) {
y = 2100;
b = 200;
} else if (x == 12) {
y = 2300;
b = 300;
} else if (x == 13) {
y = 2500;
b = 500;
} else if (x == 14) {
y = 2600;
b = 600;
} else if (x == 15) {
y = 2700;
b = 700;
} else if (x == 16) {
y = 2800;
b = 800;
}
yb = y + b;
document.getElementById("y").innerHTML = y;
document.getElementById("b").innerHTML = b;
document.getElementById("yb").innerHTML = yb;
}
</script>
</head>
<body>
<p>
<input type="range" min="10" max="16" value="10" step="1" onchange="showValue(this.value)" />
<span id="range">10</span>
</p>
<p>Y: <span id="y">2000</span></p>
<p>B: <span id="b">200</span></p>
<p>Y + B: <span id="yb">2200</span></p>
</body>
</html>
สองสไลด์ แสดง x และ ผลรวม
<html>
<head>
<script>
function showValue(newValue, slider)
{
document.getElementById("range" + slider).innerHTML=newValue;
var x = document.getElementById("range1").innerHTML;
var y = 0;
var b = 0;
if (slider == 1) {
switch (newValue) {
case "10":
y = 2000;
b = 200;
break;
case "11":
y = 2100;
b = 200;
break;
case "12":
y = 2300;
b = 300;
break;
case "13":
y = 2500;
b = 500;
break;
case "14":
y = 2600;
b = 600;
break;
case "15":
y = 2700;
b = 700;
break;
case "16":
y = 2800;
b = 800;
break;
}
} else {
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;
}
switch (newValue) {
case "10":
b = 200;
break;
case "11":
b = 200;
break;
case "12":
b = 300;
break;
case "13":
b = 500;
break;
case "14":
b = 600;
break;
case "15":
b = 700;
break;
case "16":
b = 800;
break;
}
}
document.getElementById("sum").innerHTML = parseInt(y) + parseInt(b);
}
</script>
</head>
<body>
<p>X-Y Slider: <span id="range1">10</span></p>
<input type="range" min="10" max="16" value="10" oninput="showValue(this.value,'1')" onchange="showValue(this.value,'1')">
<br><br>
<p>X-B Slider: <span id="range2">10</span></p>
<input type="range" min="10" max="16" value="10" oninput="showValue(this.value,'2')" onchange="showValue(this.value,'2')">
<br><br>
<p>Sum: <span id="sum">2000</span></p>
</body>
</html>
please creates two range sliders the best script you can. one to control the value of X and Y, 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 summation value.all slider separate control
the HTML code creates two range sliders and two div elements to display the values of Y and B respectively. The sliders have an oninput event handler attached to the updateValues function, which is called whenever the sliders are moved. The function updates the values of Y and B based on the values of X and A, respectively, and calculates the sum of Y and B. The updated values are then displayed on the page using the innerHTML property of the div elements
ใชได้แต่ไม่โชว์ X A
Here is an example using 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 the sum of Y and B is also displayed.
<!DOCTYPE html>
<html>
<head>
<title>Range Sliders Example</title>
<style>
.container {
display: flex;
flex-direction: column;
align-items: center;
}
.slider-container {
display: flex;
justify-content: space-between;
width: 400px;
}
.slider {
width: 200px;
}
.value {
font-size: 24px;
margin: 10px;
}
</style>
</head>
<body>
<div class="container">
<h2>X and Y Range Slider</h2>
<div class="slider-container">
<input type="range" id="x" class="slider" min="10" max="16" step="1" value="10" oninput="updateValues()">
<div id="y" class="value">2000</div>
</div>
<br>
<h2>A and B Range Slider</h2>
<div class="slider-container">
<input type="range" id="a" class="slider" min="100" max="160" step="10" value="100" oninput="updateValues()">
<div id="b" class="value">200</div>
</div>
<br>
<div id="sum" class="value">2200</div>
</div>
<script>
function updateValues() {
const x = document.getElementById("x").value;
const a = document.getElementById("a").value;
document.getElementById("y").innerHTML = 2000 + (x - 10) * 100;
document.getElementById("b").innerHTML = 200 + (a - 100) / 10 * 100;
document.getElementById("sum").innerHTML = Number(document.getElementById("y").innerHTML) + Number(document.getElementById("b").innerHTML);
}
</script>
</body>
</html>