JS updating HTML range slider value: I can nudge down in increments of .001 but not up by the same a-CodePudding

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()"  type="range" min=".92" max="1.08" value="1" step=.001 autocomplete="off"><span id="curval"></span>
</div><br>

<div >
  <div >Nudge</div>
  <div  onclick="p1nminus()">-</div>
  <div  onclick="p1plus()"> </div>
</div>

CodePudding user response：

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()"  type="range" min=".92" max="1.08" value="1" step=.001 autocomplete="off"><span id="curval"></span>

<div >
  <div >Nudge</div>
  <div  onclick="p1nminus()">-</div>
  <div  onclick="p1plus()"> </div>
</div>