We Keep Coding

How to clamp an Input[type="range"]

I want the slider to not pass a certain limit. How can I set this is HTML and also change it in javascript?
<input type="range" min="0" max="100" value="30">
I want to set it so that the slider can never go past a certain value though the value will be there on slider i.e slider should have min:0 max:100 but never go past say 70.

this could work for your case, but set the max value to 70 is better in my opinion.
function test(e, el) {
if (e.target.value > 70) el.value = 70;
document.querySelector("h1").innerHTML = "range value: " + e.target.value;
}
<input type="range" min="0" max="100" style="width: 100%;" oninput="test(event, this)">
<br>
<h1>range value: 50</h1>

Here's a solution for you. If the user drags the slider over to 70, we reset it to 70 again.
<h1>Display a Range Field</h1>
<label for="vol">Volume <span id="currentvalue"> </span> (between 0 and 100):</label>
<input type="range" id="vol" name="vol" min="0" max="100" value="30">
<script type="text/javascript">
document.getElementById("currentvalue").innerHTML = document.getElementById("vol").value;
document.getElementById("vol").addEventListener("change", function(e){
if(e.target.value > 70) {
alert("You can't pick above 70 for now!");
this.value = 70;
}
document.getElementById("currentvalue").innerHTML = e.target.value;
e.preventDefault();
e.stopPropagation();
})
</script>

onmouseover doesn't function when onchange does?

I've got a little script that toggles a button between disabled and not depending on the value of a number input. It works exactly as I'd expect when the event trigger is input.onchange, but it doesn't seem to work if I try to make the event button.onmouseover.
This works:
<form action="/action_page.php">
<label for="quantity">Quantity (between 1 and 5):</label>
<input onchange="myFunction()" type="number" id="quantity" name="quantity" min="1" max="5">
<input disabled id="submit" type="submit">
<p id="number"></p>
</form>
<script>
function myFunction() {
var x = document.getElementById("quantity");
var y = document.getElementById("submit");
if (x.value >= "5") {
y.toggleAttribute("disabled");
} else if (y.hasAttribute("disabled") == false) {
y.toggleAttribute("disabled");
}
}
</script>
This does not:
<form action="/action_page.php">
<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">
<input onmouseover="myFunction()" disabled id="submit" type="submit">
<p id="number"></p>
</form>
<script>
function myFunction() {
var x = document.getElementById("quantity");
var y = document.getElementById("submit");
if (x.value >= "5") {
y.toggleAttribute("disabled");
} else if (y.hasAttribute("disabled") == false) {
y.toggleAttribute("disabled");
}
}
</script>
If I remove the inital disabled attribute from the button, my else if toggle works, but the first if never toggles it off. Is there something about onmouseover that prevents it from checking the quantity value?

In HTML, disabled elements don't fire events, you can't hover or click them.
You can wrap such element within a div and fire mouseover on that div.
Here's code:
<form action="/action_page.php">
<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">
<div style="display: inline;padding: 10px;" id="wrapper_submit">
<input disabled id="submit" type="submit">
</div>
<p id="number"></p>
</form>
<script>
// After page load
window.onload = function(){
// Get div and on its mouseover
document.getElementById("wrapper_submit").onmouseover = function(){
var x = document.getElementById("quantity");
var y = document.getElementById("submit");
if (x.value > "5") y.disabled = true;
else if(x.value >= "1") y.disabled = false;
}
}
</script>
Edit: Mouseover event only fires when cursor is over element it self, it will not fire if child element covers parent. In above case if you remove padding from [Div('wrapper_submit')], mouseover event will not work.
Use mouse enter event, it works even if child covers parent 100%.
document.getElementById("wrapper_submit").onmouseenter = function(){
var x = document.getElementById("quantity");
var y = document.getElementById("submit");
if (x.value > "5") y.disabled = true;
else if(x.value >= "1") y.disabled = false;
}

It happens because your input is disabled and it doesn't react
Try this code and let me know if it works to you
<form action="/action_page.php">
<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">
<input onmouseover="myFunction()" disabled id="submit" type="submit">
<p id="number"></p>
document.getElementById("quantity").onmouseover = function() {myFunction()};
function myFunction() {
var x = document.getElementById("quantity");
var y = document.getElementById("submit");
if (x.value < "5" ) { y.removeAttribute("disabled"); }else if (x.value>= "5") {
y.toggleAttribute("disabled");
} else if (y.hasAttribute("disabled") == false) {
y.toggleAttribute("disabled");
}
}

How can I run a conditional if/else statement on slider's value in JavaScript?

I want to use the chosen number of the range slider and print in console if it's > 200 China else Poland I have the next code:
var poblacionNum = document.getElementById('poblacionNum').value;
function pais() {
var poblacionNum = document.getElementById('poblacionNum').value;
if (poblacionNum > 0) {
console.log("China");
} else {
console.log("Poland");
}
}
<div class="parametros-text">
<p>Población: <span id="poblacionNum">125</span></p>
<input type="range" id="poblacion-slider" name="poblacion" min="10" max="500" step="1" value="125">
</div>

You can try this simple code:
function pais(poblacionNum){
document.getElementById('poblacionNum').innerHTML = poblacionNum;
if(parseInt(poblacionNum) > 200){
console.log("China");
}else{
console.log("Poland");
}
}
<div class="parametros-text">
<p>Población: <span id="poblacionNum">125</span></p>
<input type="range" id="poblacion-slider" name="poblacion" min="10" max="500" step="1" value="125" oninput="pais(this.value)" onchange="pais(this.value)">
</div>

Display Leading Zeros On Input Number Fields

I have two input fields representing hours and minutes.
<input type="number" min="0" max="24" step="1" value="00" class="hours">
<input type="number" min="0" max="0.60" step="0.01" value="00" class="minutes">
Which display as:
0:0
Or:
5:3
Is there a way to display it as:
00:00
Or:
05:03
i.e in 24-hour data format (before people suggest it, I can't use type="time").

You can add an onchange attribute to your input tag, which calls a javascript function.
<script>
function myFunction() {
var minuteValue = document.getElementById("minutes").value;
if (minuteValue.length < 2) {
minuteValue = "0" + minuteValue;
}
alert(minuteValue);
}
</script>
<input id="minutes" onchange="myFunction()"/>

function formatNums(num){
if (nums < 10){
return "0" + num;
}
}
var formattedHours = formatNums(hours);
var formattedMinutes = formatNums(minutes);
NOTE: This method uses type="text" so be sure to convert back to a number if needed. Number(formattedHours);

Add a leading zero with a JavaScript function.
const hours = document.getElementById("hours");
const minutes = document.getElementById("minutes");
function addLeadingZero(value) {
return value.length < 2 ? "0" + value : value;
}
hours.addEventListener("input", function() {
hours.value = addLeadingZero(hours.value);
});
minutes.addEventListener("input", function() {
minutes.value = addLeadingZero(minutes.value);
});
<input type="number" min="0" max="24" value="00" id="hours" class="hours">
<input type="number" min="0" max="59" value="00" id="minutes" class="minutes">

simple is the best
`${number}`.padStart(2, '0')

Get average value from multiple input fields(range)

I have been searching for a solution for days, i am an beginner in javascript.
This is the form i use to input value via sliders.
<div class="formSliderField" style="display:block">
<div class="formIcons" id="formSliderImage1"></div>
<div class="formSlider" id="formSlider1">
<input class="slider" name="cat_pk" type="range" min="0" max="10" step="0.5" width="290px" value="0" onchange="field1(this.value)"/>
</div>
<div class="formMark"><p id="formMark1" class="mark">1</p></div>
</div>
<div class="formSliderField" style="display:block">
<div class="formIcons" id="formSliderImage2"></div>
<div class="formSlider" id="formSlider2">
<input class="slider" name="cat_service" type="range" min="0" max="10" step="0.5" width="290px" value="0" onchange="field2(this.value)"/>
</div>
<div class="formMark"><p id="formMark2" class="mark">1</p></div>
</div>
<div class="formSliderField" style="display:block">
<div class="formIcons" id="formSliderImage3"></div>
<div class="formSlider" id="formSlider3">
<input class="slider" name="cat_prijs" type="range" min="0" max="10" step="0.5" width="290px" value="0" onchange="field3(this.value)"/>
</div>
<div class="formMark"><p id="formMark3" class="mark">1</p></div>
</div>
<div class="formSubmitWrapper">
<div id="formSubmitButton">
<input id="formRecensieSubmit" type="submit" value="Bevestigen"/>
</div>
</div>
I need the input value from these sliders to get an average for further use. This needs to be as dynamic as possible, not after i submit this form.
You can see i use onchange, this is already used in a function to display the input values per slider.
Hope someone can help me with this.

JavaScript :
window.onload = function(){
var elements=document.querySelectorAll('input[type=range]')
for(var i = 0; i < elements.length; i++){
elements[i].addEventListener('change',calcul , false);
}
}
function calcul(){
var elements = document.querySelectorAll('input[type="range"]')
var len = 0
var buf = 0
for(var i=0;i<elements.length;i++) {
if(elements[i].parentNode.parentNode.style.display != 'none'){
buf += parseInt(elements[i].value)
len++
}
}
buf = len === 0 ? 0 : buf/len
console.log(buf)
}
CodeOpen

Maybe you're trying to achieve something like this?
(function (win, doc, undefined) {
"use strict";
var myForm = doc.getElementById("myForm"),
sliders = myForm.getElementsByClassName("slider"),
marks = myForm.getElementsByClassName("mark");
myForm.addEventListener("change", changeHandler);
function changeHandler(e) {
var t = e.target,
i = -1,
sum = 0,
avg = 0;
if (t.nodeName.toLowerCase() === "input" && t.type.toLowerCase() === "range") {
i = [].indexOf.call(sliders, t);
marks[i].innerHTML = t.value;
[].forEach.call(sliders, function (val) {
sum += parseFloat(val.value);
});
avg = parseFloat((sum / sliders.length).toFixed(1));
}
console.log(avg);
}
}(window, window.document));
Look at Demonstration