display tooltip on slider value change

Author: andyshinn

wled00/data/index.htm

@@ -441,6 +441,21 @@
 	z-index: -1;
 }
 
+.sliderbubble {
+	width: 30px;
+	line-height: 24px;
+	background: var(--c-3);
+	position: absolute;
+	transform: translateX(-50%);
+	border-radius: 6px;
+	margin-left: 10px;
+	display: inline;
+}
+
+.hidden {
+	display: none;
+}
+
 input[type=range] {
 	-webkit-appearance: none;
 	width: 220px;
@@ -480,6 +495,10 @@
 	background: var(--c-f);
 	transform: translateY(7px);
 }
+input[type=range]:active + .sliderbubble {
+	display: inline;
+	transform: translateX(-50%);
+}
 
 #wwrap {
 	display: none;
@@ -1002,6 +1021,7 @@
 			<i class="icons slider-icon">&#xe325;</i>
 			<div class="sliderwrap il">
 				<input id="sliderSpeed" class="noslide" onchange="setSpeed()" oninput="updateTrail(this)" max="255" min="0" type="range" value="128" />
+				<output class="sliderbubble hidden"></output>
 				<div class="sliderdisplay"></div>
 			</div>
 		</div>
@@ -1010,6 +1030,7 @@
 			<i class="icons slider-icon" onclick="tglLabels()">&#xe409;</i>
 			<div class="sliderwrap il">
 				<input id="sliderIntensity" class="noslide" onchange="setIntensity()" oninput="updateTrail(this)" max="255" min="0" type="range" value="128" />
+				<output class="sliderbubble hidden"></output>
 				<div class="sliderdisplay"></div>
 			</div>
 		</div>
@@ -1298,6 +1319,13 @@
 	size();
 	d.getElementById("cv").style.opacity=0;
 	if (localStorage.getItem('pcm') == "true") togglePcMode(true);
+	var sls = d.querySelectorAll('input[type="range"]');
+	for (var sl of sls) {
+		sl.addEventListener('input', updateBubble, true);
+		sl.addEventListener('touchstart', toggleBubble);
+		sl.addEventListener('touchend', toggleBubble);
+	}
+
 }
 
 function updateTablinks(tabI)
@@ -1677,6 +1705,21 @@
 	e.parentNode.getElementsByClassName('sliderdisplay')[0].style.background = val;
 }
 
+function updateBubble(e)
+{
+	var bubble = e.target.parentNode.getElementsByTagName('output')[0]
+	var max = e.target.hasAttribute('max') ? e.target.attributes.max.value : 255;
+
+	if (bubble) {
+		bubble.innerHTML = e.target.value
+	}
+}
+
+function toggleBubble(e)
+{
+	e.target.parentNode.querySelector('output').classList.toggle('hidden');
+}
+
 function updateLen(s)
 {
 	if (!d.getElementById(`seg${s}s`)) return;