diff --git a/src/httpserver/http_fns.c b/src/httpserver/http_fns.c
index 6f790b7e5..ef1d44b8f 100644
--- a/src/httpserver/http_fns.c
+++ b/src/httpserver/http_fns.c
@@ -693,8 +693,8 @@ int http_fn_index(http_request_t* request) {
 			}
 			pwmValue = CHANNEL_Get(i);
 			poststr(request, "<tr><td>");
-			hprintf255(request, "Channel %s:<br><form action=\"index\" id=\"form%i\">", CHANNEL_GetLabel(i), i);
-			hprintf255(request, "<input type=\"range\" min=\"0\" max=\"%i\" name=\"%s\" id=\"slider%i\" value=\"%i\" onchange=\"this.form.submit()\">", maxValue, inputName, i, pwmValue);
+			hprintf255(request, "Channel %s: <span id=\"sliderValue%i\">%i</span><br><form action=\"index\" id=\"form%i\">", CHANNEL_GetLabel(i), i, pwmValue, i);
+			hprintf255(request, "<input type=\"range\" min=\"0\" max=\"%i\" name=\"%s\" id=\"slider%i\" value=\"%i\" data-value-id=\"sliderValue%i\" oninput=\"updateSliderValue(this)\" onchange=\"submitSlider(this)\">", maxValue, inputName, i, pwmValue, i);
 			hprintf255(request, "<input type=\"hidden\" name=\"%sIndex\" value=\"%i\">", inputName, i);
 			hprintf255(request, "<input type=\"submit\" class='disp-none' value=\"Toggle %s\"/></form>", CHANNEL_GetLabel(i));
 			poststr(request, "</td></tr>");
@@ -805,9 +805,9 @@ int http_fn_index(http_request_t* request) {
 			pwmValue = LED_GetDimmer();
 
 			poststr(request, "<tr><td>");
-			hprintf255(request, "<h5>LED Dimmer/Brightness</h5>");
+			hprintf255(request, "<h5>LED Dimmer/Brightness: <span id=\"sliderValue%i\">%i</span></h5>", SPECIAL_CHANNEL_BRIGHTNESS, pwmValue);
 			hprintf255(request, "<form action=\"index\" id=\"form%i\">", SPECIAL_CHANNEL_BRIGHTNESS);
-			hprintf255(request, "<input type=\"range\" min=\"0\" max=\"100\" name=\"%s\" id=\"slider%i\" value=\"%i\" onchange=\"this.form.submit()\">", inputName, SPECIAL_CHANNEL_BRIGHTNESS, pwmValue);
+			hprintf255(request, "<input type=\"range\" min=\"0\" max=\"100\" name=\"%s\" id=\"slider%i\" value=\"%i\" data-value-id=\"sliderValue%i\" oninput=\"updateSliderValue(this)\" onchange=\"submitSlider(this)\">", inputName, SPECIAL_CHANNEL_BRIGHTNESS, pwmValue, SPECIAL_CHANNEL_BRIGHTNESS);
 			hprintf255(request, "<input type=\"hidden\" name=\"%sIndex\" value=\"%i\">", inputName, SPECIAL_CHANNEL_BRIGHTNESS);
 			hprintf255(request, "<input  type=\"submit\" class='disp-none' value=\"Toggle %i\"/></form>", SPECIAL_CHANNEL_BRIGHTNESS);
 			poststr(request, "</td></tr>");
@@ -826,7 +826,7 @@ int http_fn_index(http_request_t* request) {
 			hprintf255(request, "<form action=\"index\" id=\"form%i\">", SPECIAL_CHANNEL_BASECOLOR);
 			// onchange would fire only if colour was changed
 			// onblur will fire every time
-			hprintf255(request, "<input type=\"color\" name=\"%s\" id=\"color%i\" value=\"#%s\"  oninput=\"this.form.submit()\" >", inputName, SPECIAL_CHANNEL_BASECOLOR, colorValue);
+			hprintf255(request, "<input type=\"color\" name=\"%s\" id=\"color%i\" value=\"#%s\"  onchange=\"this.form.submit()\" >", inputName, SPECIAL_CHANNEL_BASECOLOR, colorValue);
 			hprintf255(request, "<input type=\"hidden\" name=\"%sIndex\" value=\"%i\">", inputName, SPECIAL_CHANNEL_BASECOLOR);
 			hprintf255(request, "<input  type=\"submit\" class='disp-none' value=\"Toggle Light\"/></form>");
 			poststr(request, "</td></tr>");
@@ -855,12 +855,12 @@ int http_fn_index(http_request_t* request) {
 			long pwmKelvinMin = HASS_TO_KELVIN(led_temperature_max);
 
 			poststr(request, "<tr><td>");
-			hprintf255(request, "<h5>LED Temperature Slider %s (%ld K) (Warm <--- ---> Cool)</h5>", activeStr, pwmKelvin);
+			hprintf255(request, "<h5>LED Temperature Slider %s (<span id=\"sliderValue%i\">%ld</span> K) (Warm <--- ---> Cool)</h5>", activeStr, SPECIAL_CHANNEL_TEMPERATURE, pwmKelvin);
 			hprintf255(request, "<form class='r' action=\"index\" id=\"form%i\">", SPECIAL_CHANNEL_TEMPERATURE);
 
 			//(KELVIN_TEMPERATURE_MAX - KELVIN_TEMPERATURE_MIN) / (HASS_TEMPERATURE_MAX - HASS_TEMPERATURE_MIN) = 13
 			hprintf255(request, "<input type=\"range\" step='13' min=\"%ld\" max=\"%ld\" ", pwmKelvinMin, pwmKelvinMax);
-			hprintf255(request, "value=\"%ld\" onchange=\"submitTemperature(this);\"/>", pwmKelvin);
+			hprintf255(request, "value=\"%ld\" data-value-id=\"sliderValue%i\" oninput=\"updateSliderValue(this)\" onchange=\"submitTemperature(this);\"/>", pwmKelvin, SPECIAL_CHANNEL_TEMPERATURE);
 
 			hprintf255(request, "<input type=\"hidden\" name=\"%sIndex\" value=\"%i\"/>", inputName, SPECIAL_CHANNEL_TEMPERATURE);
 			hprintf255(request, "<input id=\"kelvin%i\" type=\"hidden\" name=\"%s\" />", SPECIAL_CHANNEL_TEMPERATURE, inputName);
diff --git a/src/httpserver/new_http.c b/src/httpserver/new_http.c
index d7628809a..24e8cc0ba 100644
--- a/src/httpserver/new_http.c
+++ b/src/httpserver/new_http.c
@@ -357,9 +357,9 @@ void http_html_start(http_request_t *request, const char *pagename)
 	poststr(request, htmlBodyStart2);
 }
 
-const char pageScriptPart1[] = "<script type='text/javascript'>var firstTime,lastTime,onlineFor,req=null,onlineForEl=null,getElement=e=>document.getElementById(e);function showState(){clearTimeout(firstTime),clearTimeout(lastTime),null!=req&&req.abort(),(e=getElement(\"state\"))&&((req=new XMLHttpRequest).onreadystatechange=()=>{4==req.readyState&&\"OK\"==req.statusText&&(\"SELECT\"!=document.activeElement.tagName&&(\"INPUT\"!=document.activeElement.tagName||\"number\"!=document.activeElement.type&&\"color\"!=document.activeElement.type)&&(e.innerHTML=req.responseText),clearTimeout(firstTime),clearTimeout(lastTime),lastTime=setTimeout(showState,";
+const char pageScriptPart1[] = "<script type='text/javascript'>var firstTime,lastTime,onlineFor,req=null,onlineForEl=null,getElement=e=>document.getElementById(e);function isEditingControl(){var e=document.activeElement,t=e&&e.tagName,n=e&&e.type;return\"SELECT\"==t||\"INPUT\"==t&&(\"number\"==n||\"color\"==n||\"range\"==n)}function updateSliderValue(e){var t=getElement(e.dataset.valueId);t&&(t.textContent=e.value)}function submitSlider(e){updateSliderValue(e),e.form.submit()}function showState(){clearTimeout(firstTime),clearTimeout(lastTime),null!=req&&req.abort();var e=getElement(\"state\");e&&((req=new XMLHttpRequest).onreadystatechange=()=>{4==req.readyState&&\"OK\"==req.statusText&&(!isEditingControl()&&(e.innerHTML=req.responseText),clearTimeout(firstTime),clearTimeout(lastTime),lastTime=setTimeout(showState,";
 const char pageScriptPart2[] = "))},req.open(\"GET\",\"index?state=1\",!0),req.send()),firstTime=setTimeout(showState,";
-const char pageScriptPart3[] = ")}function fmtUpTime(e){var t,n,o=Math.floor(e/86400);return e%=86400,t=Math.floor(e/3600),e%=3600,n=Math.floor(e/60),e=e%60,0<o?o+` days, ${t} hours, ${n} minutes and ${e} seconds`:0<t?t+` hours, ${n} minutes and ${e} seconds`:0<n?n+` minutes and ${e} seconds`:`just ${e} seconds`}function updateOnlineFor(){onlineForEl.textContent=fmtUpTime(++onlineFor)}function onLoad(){(onlineForEl=getElement(\"onlineFor\"))&&(onlineFor=parseInt(onlineForEl.dataset.initial,10))&&setInterval(updateOnlineFor,1e3),showState()}function submitTemperature(e){var t=getElement(\"form132\");getElement(\"kelvin132\").value=Math.round(1e6/parseInt(e.value)),t.submit()}window.addEventListener(\"load\",onLoad),history.replaceState(null,\"\",window.location.pathname.slice(1)),setTimeout(()=>{var e=getElement(\"changed\");e&&(e.innerHTML=\"\")},5e3);</script>";
+const char pageScriptPart3[] = ")}function fmtUpTime(e){var t,n,o=Math.floor(e/86400);return e%=86400,t=Math.floor(e/3600),e%=3600,n=Math.floor(e/60),e=e%60,0<o?o+` days, ${t} hours, ${n} minutes and ${e} seconds`:0<t?t+` hours, ${n} minutes and ${e} seconds`:0<n?n+` minutes and ${e} seconds`:`just ${e} seconds`}function updateOnlineFor(){onlineForEl.textContent=fmtUpTime(++onlineFor)}function onLoad(){(onlineForEl=getElement(\"onlineFor\"))&&(onlineFor=parseInt(onlineForEl.dataset.initial,10))&&setInterval(updateOnlineFor,1e3),showState()}function submitTemperature(e){updateSliderValue(e);var t=getElement(\"form132\");getElement(\"kelvin132\").value=Math.round(1e6/parseInt(e.value)),t.submit()}window.addEventListener(\"load\",onLoad),history.replaceState(null,\"\",window.location.pathname.slice(1)),setTimeout(()=>{var e=getElement(\"changed\");e&&(e.innerHTML=\"\")},5e3);</script>";
 
 void http_html_end(http_request_t *request)
 {
diff --git a/src/httpserver/script.js b/src/httpserver/script.js
index 863a9b920..e7821305b 100644
--- a/src/httpserver/script.js
+++ b/src/httpserver/script.js
@@ -8,6 +8,32 @@ var onlineForEl = null;
 
 var getElement = (id) => document.getElementById(id);
 
+function isEditingControl() {
+	var activeElement = document.activeElement;
+	if (!activeElement) {
+		return false;
+	}
+	if (activeElement.tagName == "SELECT") {
+		return true;
+	}
+	return (
+		activeElement.tagName == "INPUT" &&
+		(activeElement.type == "number" || activeElement.type == "color" || activeElement.type == "range")
+	);
+}
+
+function updateSliderValue(slider) {
+	var valueEl = getElement(slider.dataset.valueId);
+	if (valueEl) {
+		valueEl.textContent = slider.value;
+	}
+}
+
+function submitSlider(slider) {
+	updateSliderValue(slider);
+	slider.form.submit();
+}
+
 // refresh status section every 3 seconds
 function showState() {
 	clearTimeout(firstTime);
@@ -19,13 +45,7 @@ function showState() {
 	req.onreadystatechange = () => {
 		// somehow status was 0 on Windows, but "OK" works on both Beken and Windows
 		if (req.readyState == 4 && req.statusText == "OK") {
-			if (
-				!(
-					document.activeElement.tagName == "SELECT" &&
-					(document.activeElement.tagName == "INPUT" &&
-					(document.activeElement.type == "number" || document.activeElement.type == "color"))
-				)
-			) {
+			if (!isEditingControl()) {
 				var stateEl = getElement("state");
 				if (stateEl) {
 					stateEl.innerHTML = req.responseText;
@@ -80,6 +100,7 @@ function onLoad() {
 }
 
 function submitTemperature(slider) {
+	updateSliderValue(slider);
 	var form = getElement("form132");
 	var kelvinField = getElement("kelvin132");
 	kelvinField.value = Math.round(1000000 / parseInt(slider.value));
diff --git a/src/selftest/selftest_http.c b/src/selftest/selftest_http.c
index b837a09b0..e171f56b8 100644
--- a/src/selftest/selftest_http.c
+++ b/src/selftest/selftest_http.c
@@ -789,7 +789,7 @@ bool SIM_HasHTTPRGB() {
 	s.tag = "input";
 	s.parms[0].name = "type";
 	s.parms[0].value = "color";
-	s.parms[1].name = "oninput";
+	s.parms[1].name = "onchange";
 	s.parms[1].value = "this.form.submit()";
 	s.parms[2].name = "name";
 	s.parms[2].value = "rgb";