diff --git a/wled00/data/index.css b/wled00/data/index.css
index 0e36ff08c9..1be59bc260 100644
--- a/wled00/data/index.css
+++ b/wled00/data/index.css
@@ -442,14 +442,14 @@ button {
 /* Slider wrapper div */
 .sliderwrap {
 	height: 30px;
-	width: 230px;
+	width: 222px;
 	max-width: 230px;
 	position: relative;
 	z-index: 0;
 }
 
 #sliders .slider {
-	padding-right: 64px; /* offset for bubble */
+	padding-right: 64px; /* offset for number input */
 }
 
 #sliders .slider, #info .slider {
@@ -694,26 +694,23 @@ img {
 	display: none;
 }
 
-.sliderbubble {
-	width: 24px;
-	position: absolute;
-	display: inline-block;
-	border-radius: 16px;
-	background: var(--c-3);
-	color: var(--c-f);
-	padding: 4px;
-	font-size: 14px;
-	right: 6px;
-	transition: visibility .25s ease,opacity .25s ease;
-	opacity: 0;
-	visibility: hidden;
-	/* left: 8px; */
-	top: 4px;
-}
-
-output.sliderbubbleshow {
-	visibility: visible;
-	opacity: 1;
+input[type=number].sliderInput {
+    width: 24px;
+    position: absolute;
+    display: inline-block;
+    border-radius: 10px;
+    background: var(--c-3);
+    color: var(--c-f);
+    padding: 2px 4px;
+    font-size: 14px;
+    transition: visibility 0.25s ease, opacity 0.25s ease;
+    opacity: 1;
+    visibility: visible;
+    right: 4px;
+    bottom: 5px;
+}
+input[type=number].sliderInput:invalid {
+	color: #f00;
 }
 
 input[type=range] {
@@ -724,7 +721,6 @@ input[type=range] {
 	background-color: transparent;
 	cursor: pointer;
 }
-
 input[type=range]:focus {
 	outline: 0;
 }
@@ -1506,13 +1502,6 @@ dialog {
 	background: var(--c-sbh);
 }
 
-@media not all and (hover: none) {
-	.sliderwrap:hover + output.sliderbubble {
-		visibility: visible;
-		opacity: 1;
-	}
-}
-
 @media all and (max-width: 1023px) {
 	.top button {
 		width: 8%;
@@ -1524,7 +1513,7 @@ dialog {
 }
 
 @media all and (max-width: 335px) {
-	.sliderbubble {
+	.sliderInput {
 		display: none;
   	}
 }
@@ -1585,7 +1574,7 @@ dialog {
 	#putil .btn-s {
 		width: 114px;
 	}
-	#sliders .sliderbubble {
+	#sliders .sliderInput {
 		display: none;
 	}
 	#sliders .sliderwrap, .sbs .sliderwrap {
diff --git a/wled00/data/index.htm b/wled00/data/index.htm
index e74ea00764..93c232b684 100644
--- a/wled00/data/index.htm
+++ b/wled00/data/index.htm
@@ -32,10 +32,10 @@
 			<div class="slider">
 				<i class="icons slider-icon" onclick="tglTheme()" style="transform: translateY(2px);">&#xe2a6;</i>
 				<div class="sliderwrap il">
-					<input id="sliderBri" onchange="setBri()" oninput="updateTrail(this)" max="255" min="1" type="range" value="128" />
+					<input id="sliderBri" onchange="setBri(this.value)" oninput="updateTrail(this)" max="255" min="1" type="range" value="128" />
 					<div class="sliderdisplay"></div>
 				</div>
-				<output class="sliderbubble"></output>
+				<input class="sliderInput" onchange="if(this.checkValidity()) {setBri(this.value)}" onfocus="this.select();" max="255" min="1" type="number" value="128">
 			</div>
 		</div>
 		<iframe id="liveview" src="about:blank"></iframe>
@@ -202,42 +202,42 @@
 			<div id="slider0" class="slider">
 				<i class="icons slider-icon" title="Freeze" onclick="tglFreeze()">&#xe325;</i>
 				<div title="Effect speed" class="sliderwrap il">
-					<input id="sliderSpeed" class="noslide" onchange="setSpeed()" oninput="updateTrail(this)" max="255" min="0" type="range" value="128" />
+					<input id="sliderSpeed" class="noslide" onchange="setSpeed(this.value)" oninput="updateTrail(this)" max="255" min="0" type="range" value="128" />
 					<div class="sliderdisplay"></div>
 				</div>
-				<output class="sliderbubble"></output>
+				<input class="sliderInput" onchange="if(this.checkValidity()) {setSpeed(this.value)}" onfocus="this.select();" max="255" min="0" type="number" value="128" >
 			</div>
 			<div id="slider1" class="slider">
 				<i class="icons slider-icon" title="Toggle labels" onclick="tglLabels()">&#xe409;</i>
 				<div title="Effect intensity" class="sliderwrap il">
-					<input id="sliderIntensity" class="noslide" onchange="setIntensity()" oninput="updateTrail(this)" max="255" min="0" type="range" value="128" />
+					<input id="sliderIntensity" class="noslide" onchange="setIntensity(this.value)" oninput="updateTrail(this)" max="255" min="0" type="range" value="128" />
 					<div class="sliderdisplay"></div>
 				</div>
-				<output class="sliderbubble"></output>
+				<input class="sliderInput" onchange="if(this.checkValidity()) {setIntensity(this.value)}" onfocus="this.select();" max="255" min="0" type="number" value="128">
 			</div>
 			<div id="slider2" class="slider hide">
 				<i class="icons slider-icon">&#xe410;</i>
 				<div title="Custom 1" class="sliderwrap il">
-					<input id="sliderC1" class="noslide" onchange="setCustom(1)" oninput="updateTrail(this)" max="255" min="0" type="range" value="0" />
+					<input id="sliderC1" class="noslide" onchange="setCustom(1, this.value)" oninput="updateTrail(this)" max="255" min="0" type="range" value="0" />
 					<div class="sliderdisplay"></div>
 				</div>
-				<output class="sliderbubble"></output>
+				<input class="sliderInput" onchange="if(this.checkValidity()) { setCustom(1, this.value)}" onfocus="this.select();" max="255" min="0" type="number" value="0">
 			</div>
 			<div id="slider3" class="slider hide">
 				<i class="icons slider-icon">&#xe0a2;</i>
 				<div title="Custom 2" class="sliderwrap il">
-					<input id="sliderC2" class="noslide" onchange="setCustom(2)" oninput="updateTrail(this)" max="255" min="0" type="range" value="0" />
+					<input id="sliderC2" class="noslide" onchange="setCustom(2, this.value)" oninput="updateTrail(this)" max="255" min="0" type="range" value="0" />
 					<div class="sliderdisplay"></div>
 				</div>
-				<output class="sliderbubble"></output>
+				<input class="sliderInput" onchange="if(this.checkValidity()) { setCustom(2, this.value); }"  onfocus="this.select();" max="255" min="0" type="number" value="0">
 			</div>
 			<div id="slider4" class="slider hide">
 				<i class="icons slider-icon">&#xe0e8;</i>
 				<div title="Custom 3" class="sliderwrap il">
-					<input id="sliderC3" class="noslide" onchange="setCustom(3)" oninput="updateTrail(this)" max="31" min="0" type="range" value="0" />
+					<input id="sliderC3" class="noslide" onchange="setCustom(3, this.value)" oninput="updateTrail(this)" max="31" min="0" type="range" value="0" />
 					<div class="sliderdisplay"></div>
 				</div>
-				<output class="sliderbubble"></output>
+				<input class="sliderInput" onchange="if(this.checkValidity()) { setCustom(3, this.value); }"  onfocus="this.select();" max="31" min="0" type="number" value="0">
 			</div>
 			<div id="fxopt" class="option fade">
 				<label id="opt0" title="Check 1" class="check ochkl hide"><i class="icons">&#xe2b3;</i>
diff --git a/wled00/data/index.js b/wled00/data/index.js
index d9c64bdfbf..14e8828f45 100644
--- a/wled00/data/index.js
+++ b/wled00/data/index.js
@@ -295,10 +295,6 @@ function onLoad()
 	d.addEventListener("visibilitychange", handleVisibilityChange, false);
 	//size();
 	gId("cv").style.opacity=0;
-	d.querySelectorAll('input[type="range"]').forEach((sl)=>{
-		sl.addEventListener('touchstart', toggleBubble);
-		sl.addEventListener('touchend', toggleBubble);
-	});
 }
 
 function updateTablinks(tabI)
@@ -1135,15 +1131,8 @@ function updateTrail(e)
 		var val = `linear-gradient(90deg, var(--bg) ${perc}%, var(--c-6) ${perc}%)`;
 		sd.style.backgroundImage = val;
 	}
-	var b = e.parentNode.parentNode.getElementsByTagName('output')[0];
-	if (b) b.innerHTML = e.value;
-}
-
-// rangetouch slider function
-function toggleBubble(e)
-{
-	var b = e.target.parentNode.parentNode.getElementsByTagName('output')[0];
-	b.classList.toggle('sliderbubbleshow');
+	var b = e.parentNode.parentNode.getElementsByClassName('sliderInput')[0];
+	if (b) b.value = e.value;
 }
 
 // updates segment length upon input of segment values
@@ -2371,32 +2360,32 @@ function setPalette(paletteId = null)
 	requestJson(obj);
 }
 
-function setBri()
+function setBri(val) 
 {
-	var obj = {"bri": parseInt(gId('sliderBri').value)};
+	var obj = { "bri": parseInt(val) };
 	requestJson(obj);
 }
 
-function setSpeed()
+function setSpeed(val) 
 {
-	var obj = {"seg": {"sx": parseInt(gId('sliderSpeed').value)}};
+	var obj = { "seg": { "sx": parseInt(val) } };
 	requestJson(obj);
 }
 
-function setIntensity()
+function setIntensity(val) 
 {
-	var obj = {"seg": {"ix": parseInt(gId('sliderIntensity').value)}};
+	var obj = { "seg": { "ix": parseInt(val) } };
 	requestJson(obj);
 }
 
-function setCustom(i=1)
+function setCustom(i=1, val)
 {
 	if (i<1 || i>3) return;
 	var obj = {"seg": {}};
-	var val = parseInt(gId(`sliderC${i}`).value);
-	if      (i===3) obj.seg.c3 = val;
-	else if (i===2) obj.seg.c2 = val;
-	else            obj.seg.c1 = val;
+	val = parseInt(val);
+	if		(i===3) obj.seg.c3 = val;
+	else if	(i===2) obj.seg.c2 = val;
+	else			obj.seg.c1 = val;
 	requestJson(obj);
 }