我试图获取两个滑块输入的值，以更改滑块上方的图像。例如，如果滑块1的值为10，滑块2的值为80，它将更改图像。
我已经成功地用一个滑块完成了此操作，但是，当尝试使用两个滑块时，似乎有些混乱。下面是一个滑块解决方案的代码。
P.s我从链接上的w3school中获取了滑块。 https://www.w3schools.com/howto/howto_js_rangeslider.asp
感谢阅读，
var fatslider = document.getElementById("myRange1");
var fatoutput = document.getElementById("demo1");
fatoutput.innerHTML = fatslider.value; // Display the default slider value
// Update the current slider value (each time you drag the slider handle)
fatslider.oninput = function() {
fatoutput.innerHTML = this.value;
if(this.value == 0){
document.getElementById("quiz-q1-current-bodytype-image").src="images/bodytype/fat01muscle01.png";;
} else if(this.value == 5){
document.getElementById("quiz-q1-current-bodytype-image").src="images/bodytype/fat02muscle01.png";;
} else if(this.value == 10){
document.getElementById("quiz-q1-current-bodytype-image").src="images/bodytype/fat03muscle01.png";;
} else if(this.value == 15){
document.getElementById("quiz-q1-current-bodytype-image").src="images/bodytype/fat04muscle01.png";;
} else if(this.value == 20){
document.getElementById("quiz-q1-current-bodytype-image").src="images/bodytype/fat05muscle01.png";;
} else if(this.value == 25){
document.getElementById("quiz-q1-current-bodytype-image").src="images/bodytype/fat06muscle01.png";;
} else if(this.value == 30){
document.getElementById("quiz-q1-current-bodytype-image").src="images/bodytype/fat08muscle01.png";;
} else if(this.value == 35){
document.getElementById("quiz-q1-current-bodytype-image").src="images/bodytype/fat09muscle01.png";;
} else if(this.value == 40){
document.getElementById("quiz-q1-current-bodytype-image").src="images/bodytype/fat10muscle01.png";;
} else if(this.value == 45){
document.getElementById("quiz-q1-current-bodytype-image").src="images/bodytype/fat11muscle01.png";;
} else if(this.value == 50){
document.getElementById("quiz-q1-current-bodytype-image").src="images/bodytype/fat12muscle01.png";;
} else if(this.value == 55){
document.getElementById("quiz-q1-current-bodytype-image").src="images/bodytype/fat13muscle01.png";;
} else if(this.value == 60){
document.getElementById("quiz-q1-current-bodytype-image").src="images/bodytype/fat14muscle01.png";;
} else if(this.value == 65){
document.getElementById("quiz-q1-current-bodytype-image").src="images/bodytype/fat15muscle01.png";;
} else if(this.value == 70){
document.getElementById("quiz-q1-current-bodytype-image").src="images/bodytype/fat16muscle01.png";;
} else if(this.value == 75){
document.getElementById("quiz-q1-current-bodytype-image").src="images/bodytype/fat17muscle01.png";;
} else if(this.value == 80){
document.getElementById("quiz-q1-current-bodytype-image").src="images/bodytype/fat18muscle01.png";;
} else if(this.value == 85){
document.getElementById("quiz-q1-current-bodytype-image").src="images/bodytype/fat19muscle01.png";;
} else if(this.value == 90){
document.getElementById("quiz-q1-current-bodytype-image").src="images/bodytype/fat20muscle01.png";;
} else if(this.value == 95){
document.getElementById("quiz-q1-current-bodytype-image").src="images/bodytype/fat21muscle01.png";;
} else if(this.value == 100){
document.getElementById("quiz-q1-current-bodytype-image").src="images/bodytype/fat22muscle01.png";;
}
}.fat-slidecontainer {
width: 100%; /* Width of the outside container */
}
/* The slider itself */
.fat-slider {
-webkit-appearance: none; /* Override default CSS styles */
appearance: none;
width: 100%; /* Full-width */
height: 25px; /* Specified height */
background: #d3d3d3; /* Grey background */
outline: none; /* Remove outline */
opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
-webkit-transition: .2s; /* 0.2 seconds transition on hover */
transition: opacity .2s;
}
/* Mouse-over effects */
.fat-slider:hover {
opacity: 1; /* Fully shown on mouse-over */
}
/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz-
(Firefox) to override default look) */
.fat-slider::-webkit-slider-thumb {
-webkit-appearance: none; /* Override default look */
appearance: none;
width: 25px; /* Set a specific slider handle width */
height: 25px; /* Slider handle height */
background: #4CAF50; /* Green background */
cursor: pointer; /* Cursor on hover */
}
.fat-slider::-moz-range-thumb {
width: 25px; /* Set a specific slider handle width */
height: 25px; /* Slider handle height */
background: #4CAF50; /* Green background */
cursor: pointer; /* Cursor on hover */
}
.fat-slidecontainer {
width: 100%; /* Width of the outside container */
}
/* The slider itself */
.muscle-slider {
-webkit-appearance: none; /* Override default CSS styles */
appearance: none;
width: 100%; /* Full-width */
height: 25px; /* Specified height */
background: #d3d3d3; /* Grey background */
outline: none; /* Remove outline */
opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
-webkit-transition: .2s; /* 0.2 seconds transition on hover */
transition: opacity .2s;
}
/* Mouse-over effects */
.muscle-slider:hover {
opacity: 1; /* Fully shown on mouse-over */
}
/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz-
(Firefox) to override default look) */
.muscle-slider::-webkit-slider-thumb {
-webkit-appearance: none; /* Override default look */
appearance: none;
width: 25px; /* Set a specific slider handle width */
height: 25px; /* Slider handle height */
background: #4CAF50; /* Green background */
cursor: pointer; /* Cursor on hover */
}
.muscle-slider::-moz-range-thumb {
width: 25px; /* Set a specific slider handle width */
height: 25px; /* Slider handle height */
background: #4CAF50; /* Green background */
cursor: pointer; /* Cursor on hover */
}<center>
<img src="images/bodytype/fat10muscle01.png" id="quiz-q1-current-bodytype-image">
<p>Select Fat Level</p>
<div class="fat-slidecontainer">
<input type="range" min="1" max="100" value="50" class="fat-slider" id="myRange1">
<p>Value: <span id="demo1"></span></p>
</div>
答案 0 :(得分：0)
首先，您需要确保您的价值观与您的期望保持一致。由于您的代码旨在支持5、10、15、20、25、30、35、40、45、50、55、60、65、70、75、80、85、90、95、100的值。为此，最小值需要为5，最大值需要为100，步长必须为5：
<center>
<img src="images/bodytype/fat10muscle01.png" id="quiz-q1-current-bodytype-image">
<p>Select Fat Level</p>
<div class="fat-slidecontainer">
<input type="range" min="5" max="100" value="50" class="fat-slider" id="myRange1" step="5">
<p>Value: <span id="demo1"></span></p>
</div>
<p>Select Muscle Level</p>
<div class="muscle-slidecontainer">
<input type="range" min="5" max="100" value="50" class="muscle-slider" id="myRange2" step="5">
<p>Value: <span id="demo2"></span></p>
</div>
</center>
现在，让我们修复Javascript：
var fatslider = document.getElementById("myRange1");
var fatoutput = document.getElementById("demo1");
fatoutput.innerHTML = fatslider.value; // Display the default slider value
var muscleslider = document.getElementById("myRange2");
var muscleoutput = document.getElementById("demo2");
muscleoutput.innerHTML = muscleslider.value; // Display the default slider value
var mapSliderToPicture = {
"0": "01",
"5": "01",
"10": "02",
"15": "03",
"20": "04",
"25": "05",
"30": "06",
"35": "07",
"40": "08",
"45": "09",
"50": "10",
"55": "11",
"60": "12",
"65": "13",
"70": "14",
"75": "15",
"80": "16",
"85": "17",
"90": "18",
"95": "19",
"100": "20",
};
function updateImage(fat, muscle) {
console.log(document.getElementById("quiz-q1-current-bodytype-image").src = `images/bodytype/fat${mapSliderToPicture[fat]}muscle${mapSliderToPicture[muscle]}.png`);
}
muscleslider.oninput = function() {
updateImage(parseInt(document.getElementById("myRange1").value), parseInt(muscleoutput.innerHTML = this.value));
}
fatslider.oninput = function() {
updateImage(parseInt(fatoutput.innerHTML = this.value), parseInt(document.getElementById("myRange2").value));
}
单位换算：
oninput个事件，它们调用了相同的函数并传递了正确的参数JSFiddle：https://jsfiddle.net/0cb6hmfs/1/