使用向上/向下按钮更新我的HTML5滑块

Question

我是HTML新手，我想根据按键更新滑块。也就是说，每当我选择“向上”或“向下”时，滑块会随着“range2”值的变化而移动

我将滑块与按钮组合在一起，以便使用滑块更精确地设置和/或使用按钮更精确地设置：

以下是我构建滑块和按钮的方法：

				<div id="mainThermostat">
				
					<div id="tstatSlider">
				
						<h2>Thermostat Setting</h2>
						<input id="tstatRange" type="range" style="width: 200px; height 40px" min="72.0" max="86.0" value="76" step = "0.5" list="increments" oninput="showMainTstatValue(this.value)" onchange="showMainTstatValue(this.value)">
						<datalist id="increments">
							<option>72</option>
							<option>74</option>
							<option>76</option>
							<option>78</option>
							<option>80</option>
							<option>82</option>
							<option>84</option>
							<option>86</option>
						</datalist>
						<span id="range2">76.0</span>&deg;F
						<br/> <br/>
						<input type="button" onclick="sendMainTstatValue()" value = SUBMIT />
						<br /><br />
					</div>
					
					<div id="tstatButtons">
						<br />
						<br />
						<input type="button" class="button" value="UP" onclick="tstatUP()">
						<br />
						<input type="button" class="button" value="DOWN" onclick="tstatDN()">
					</div>

				
				</div>

这是我的职能：

function showMainTstatValue(newValue)
{
 	document.getElementById("range2").innerHTML = newValue;
}

function tstatUP()
{
	var newValue = document.getElementById("range2").innerHTML;
	newValue++;
	if(newValue > 86) newValue = 86;
	document.getElementById("range2").innerHTML = newValue;
}

function tstatDN()
{
    var newValue = document.getElementById("range2").innerHTML;
	newValue--;
	if(newValue < 72) newValue = 72;
	document.getElementById("range2").innerHTML = newValue;
}

function sendMainTstatValue()
{
	var newValue = document.getElementById("range2").innerHTML;
	var request = new XMLHttpRequest();
	var url = 'http://10.0.1.25:3480/data_request?id=action&output_format=xml&DeviceNum=3&serviceId=urn:upnp-org:serviceId:TemperatureSetpoint1_Cool&action=SetCurrentSetpoint&NewCurrentSetpoint='+newValue;
	request.open('GET', url);
	request.send();
}

Answer 1

您的滑块未更新按钮输入的值。尝试不仅设置标签＆＃39; s（＆＃34; range2＆＃34;）innerHTML，还要记住在tstatUP（）中设置实际滑块（​​＆＃34; tstatRange＆＃34;）值和tstatDN（）函数：

document.getElementById("tstatRange").value = newValue;