JS 更新 HTML 范围滑块值：我可以以 .001 的增量向下移动但不能向上移动相同的数量？

Question

正如标题，我可以以 .001 的增量向下微调，但不能向上微调，因为它似乎跳到了最大值？

在示例代码中，按下 Nudge - 按钮看到每次按下时值减少 .001，完全符合预期但是按下 Nudge + 按钮我预计每次按下都会增加 .001 但它跳到最大值范围滑块的值？

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>

Answer 1

请记住 JavaScript 是松散类型的，因此加号运算符也可能导致字符串连接。（输入值始终是字符串。）如果您先将该值强制为浮点数，它就可以工作。

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>

JS 更新 HTML 范围滑块值：我可以以 .001 的增量向下移动但不能向上移动相同的数量？

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

javascript

increment

rangeslider