Quiero establecer un límite mínimo de 25 kai máximo de 250 para los botones más y menos.
Cuando muevo el control deslizante hacia la izquierda a 25 lpm, si presiono el botón menos, continuará mostrando 24-23-22, etc., mientras quiero que se detenga en 25. De manera similar, si subo el control deslizante a 250 y luego presione el botón más, quiero que se detenga allí (no para ir a 251-252, etc.) ¿Cómo puedo hacer esto con Javascript o jQuery? ¡¡¡Gracias!!!
function addBpm() { document.getElementById("screen").value = parseInt(document.getElementById("screen").value) + 1; bpmInput.value++; } function minusBpm() { document.getElementById("screen" ).value = parseInt(document.getElementById("screen").value)- 1; bpmInput.value--; } function setTempo() { document.getElementById("screen").value = document.getElementById("bpmInput").value; } #screen { width:100%; height:50px; background:orange; color:#fff; top:10px; position:absolute; font-size:2em } #plus { width:45%; height:50px; color:green; top:80px; right:10px; position:absolute; } #minus { width:45%; height:50px; color:green; top:80px; left:10px; position:absolute; } #bpmInput { width:100%; height:50px; background:#222; color:lime; margin-top:120px; position:relative; } <input id="screen" type="button" min="25" max="250" value="30"/> <button id="minus" min="25" max="250" onclick="minusBpm()">-</button> <button id="plus" min="25" max="250" onclick="addBpm()">+</button> <input id="bpmInput" type="range" onchange ="setTempo()"oninput="setTempo()" min="25" max="250" value="100" style="top:3.5vmin;"/>Puede hacerlo comprobando el valor y simplemente regresando si es mínimo o máximo.
function addBpm() { if(document.getElementById("screen").value ==250) return document.getElementById("screen").value = parseInt(document.getElementById("screen").value) + 1; bpmInput.value++; } function minusBpm() { if(document.getElementById("screen").value ==25) return document.getElementById("screen" ).value = parseInt(document.getElementById("screen").value)- 1; bpmInput.value--; } function setTempo() { document.getElementById("screen").value = document.getElementById("bpmInput").value; } #screen { width:100%; height:50px; background:orange; color:#fff; top:10px; position:absolute; font-size:2em } #plus { width:45%; height:50px; color:green; top:80px; right:10px; position:absolute; } #minus { width:45%; height:50px; color:green; top:80px; left:10px; position:absolute; } #bpmInput { width:100%; height:50px; background:#222; color:lime; margin-top:120px; position:relative; } <input id="screen" type="button" min="25" max="250" value="30"/> <button id="minus" min="25" max="250" onclick="minusBpm()">-</button> <button id="plus" min="25" max="250" onclick="addBpm()">+</button> <input id="bpmInput" type="range" onchange ="setTempo()"oninput="setTempo()" min="25" max="250" value="100" style="top:3.5vmin;"/>