display tooltip on slider value change

This commit is contained in:
Andy Shinn 2020-11-24 23:10:18 -06:00
parent b25e22bca4
commit c7e1b47c59
2 changed files with 2170 additions and 2121 deletions

View File

@ -441,6 +441,21 @@ img {
z-index: -1; 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] { input[type=range] {
-webkit-appearance: none; -webkit-appearance: none;
width: 220px; width: 220px;
@ -480,6 +495,10 @@ input[type=range]::-moz-range-thumb {
background: var(--c-f); background: var(--c-f);
transform: translateY(7px); transform: translateY(7px);
} }
input[type=range]:active + .sliderbubble {
display: inline;
transform: translateX(-50%);
}
#wwrap { #wwrap {
display: none; display: none;
@ -1002,6 +1021,7 @@ input[type=number]::-webkit-outer-spin-button {
<i class="icons slider-icon">&#xe325;</i> <i class="icons slider-icon">&#xe325;</i>
<div class="sliderwrap il"> <div 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()" oninput="updateTrail(this)" max="255" min="0" type="range" value="128" />
<output class="sliderbubble hidden"></output>
<div class="sliderdisplay"></div> <div class="sliderdisplay"></div>
</div> </div>
</div> </div>
@ -1010,6 +1030,7 @@ input[type=number]::-webkit-outer-spin-button {
<i class="icons slider-icon" onclick="tglLabels()">&#xe409;</i> <i class="icons slider-icon" onclick="tglLabels()">&#xe409;</i>
<div class="sliderwrap il"> <div 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()" oninput="updateTrail(this)" max="255" min="0" type="range" value="128" />
<output class="sliderbubble hidden"></output>
<div class="sliderdisplay"></div> <div class="sliderdisplay"></div>
</div> </div>
</div> </div>
@ -1298,6 +1319,13 @@ function onLoad() {
size(); size();
d.getElementById("cv").style.opacity=0; d.getElementById("cv").style.opacity=0;
if (localStorage.getItem('pcm') == "true") togglePcMode(true); 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) function updateTablinks(tabI)
@ -1677,6 +1705,21 @@ function updateTrail(e, slidercol)
e.parentNode.getElementsByClassName('sliderdisplay')[0].style.background = val; 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) function updateLen(s)
{ {
if (!d.getElementById(`seg${s}s`)) return; if (!d.getElementById(`seg${s}s`)) return;

File diff suppressed because it is too large Load Diff