I want to set limit to min 25 kai max 250 to the buttons plus and minus.
When I move the slider to the left at 25 bpm, if I press the minus button, it will continue to show 24-23-22 etc, while I want it to stop at 25. Similarly if I go the slider to 250, and then press the plus button, I want it to stop there (not to go to 251-252 etc.) How can I do this with Javascript or jQuery? Thanks!!!
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;"/>You can do that by checking the value and just returning if it is min or max.
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;"/>