Como título, ¿puedo empujar hacia abajo en incrementos de .001 pero no en la misma cantidad que parece saltar al valor máximo?
En el código de ejemplo, al presionar el botón Empujar - se ve que el valor disminuye en .001 cada vez que lo presiona, exactamente como se esperaba; sin embargo, al presionar el botón Empujar +, espero un aumento de .001 cada vez que lo presiona, pero en su lugar salta al valor máximo para el control deslizante de rango. ?
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>Tenga en cuenta que JavaScript está escrito de forma flexible, por lo que el operador más también puede provocar la concatenación de cadenas. (Los valores de entrada son siempre cadenas). Si fuerza el valor a un flotante primero, funciona.
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>