Update my HTML5 slider with up/down buttons

Question

I am new to HTML and I would like to update a slider based on button presses. That is, each time I select "UP" or "Down" the slider traverses with the change in value of "range2"

I am combining a slider with buttons to allow setting the to be more precisely with the slider and/or more grossly with the buttons:

Here is how I construct the sliders and buttons:

				<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>

and here are my functions:

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();
}

Lelefant Lelefant · Accepted Answer · 2016-07-09T15:48:25

Your slider is not updating the values entered by the button. Try to not only set the label's ("range2") innerHTML, but remember to set the actual slider's ("tstatRange") value in your tstatUP() and tstatDN() functions:

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

Update my HTML5 slider with up/down buttons

1 Answers