As title, I can nudge down in increments of .001 but not up by the same amount as it seems to jump to the max value?
In the example code, pressing the Nudge - button see's the value decrease by .001 each press, exactly as expected however pressing the Nudge + button I expect an increase of .001 each press but instead it jumps to the max value for the range slider?
updatespeedchange();
function updatespeedchange() {
document.getElementById('curval').innerText = document.getElementById('p1pitchslider').value;
}
function p1nminus() {
document.getElementById('p1pitchslider').value = document.getElementById('p1pitchslider').value - .001;
updatespeedchange();
}
function p1plus() {
document.getElementById('p1pitchslider').value = document.getElementById('p1pitchslider').value + .001;
updatespeedchange();
}.contbendnudge {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
gap: 0px 0px;
grid-auto-flow: row;
width: 45px;
height: 25px;
border: 0.5px solid pink;
font-size: 10px;
text-align: center;
grid-template-areas:
"Nudge Nudge"
"nminus nplus";
}
.Nudge {
line-height: 10px;
grid-area: Nudge;
}
.nminus {
font-size: 34px;
line-height: 4px;
font-weight: 1;
margin-top: 2px;
grid-area: nminus;
}
.nplus {
font-size: 22px;
line-height: 10px;
font-weight: 900;
margin-top: 2px;
grid-area: nplus;
}<input id="p1pitchslider" oninput="updatespeedchange()" class="pitchslider" type="range" min=".92" max="1.08" value="1" step=.001 autocomplete="off"><span id="curval"></span>
</div><br>
<div class="contbendnudge">
<div class="Nudge">Nudge</div>
<div class="nminus" onclick="p1nminus()">-</div>
<div class="nplus" onclick="p1plus()">+</div>
</div>Keep in mind that JavaScript is loosely typed, so the plus operator can also cause string concatenation. (Input values are always strings.) If you force the value to a float first it works.
updatespeedchange();
function updatespeedchange() {
document.getElementById('curval').innerText =
document.getElementById('p1pitchslider').value;
}
function p1nminus() {
document.getElementById('p1pitchslider').value -= .001;
updatespeedchange();
}
function p1plus() {
document.getElementById('p1pitchslider').value =
parseFloat(document.getElementById('p1pitchslider').value) + .001;
updatespeedchange();
}.contbendnudge {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
gap: 0px 0px;
grid-auto-flow: row;
width: 45px;
height: 25px;
border: 0.5px solid pink;
font-size: 10px;
text-align: center;
grid-template-areas: "Nudge Nudge" "nminus nplus";
}
.Nudge {
line-height: 10px;
grid-area: Nudge;
}
.nminus {
font-size: 34px;
line-height: 4px;
font-weight: 1;
margin-top: 2px;
grid-area: nminus;
}
.nplus {
font-size: 22px;
line-height: 10px;
font-weight: 900;
margin-top: 2px;
grid-area: nplus;
}<input id="p1pitchslider" oninput="updatespeedchange()" class="pitchslider" type="range" min=".92" max="1.08" value="1" step=.001 autocomplete="off"><span id="curval"></span>
<div class="contbendnudge">
<div class="Nudge">Nudge</div>
<div class="nminus" onclick="p1nminus()">-</div>
<div class="nplus" onclick="p1plus()">+</div>
</div>