I have three range first range it Main , and another it child .. when i change main range i want automatically change another range
Main:<input type="range" name="range" step="1" value="0" min="0" max="200" 0 style="width:100%;" /> <br> <BR>
Child range:<br>
<input type="range" name="range" step="1" value="0" min="0" max="200" 0/><input type="range" name="range" step="1" value="0" min="0" max="200" />
<h3>when i change Main range i want change child range with Main
</h3>
This is a basic example
window.onload = function(){
var rangeMain = document.getElementById('main'),
rangeChild1 = document.getElementById('child1'),
rangeChild2 = document.getElementById('child2');
rangeMain.onchange = function(){
rangeChild1.value = this.value;
rangeChild2.value = this.value;
}
}
Main:<input id="main" type="range" name="range" step="1" value="0" min="0" max="200" 0 style="width:100%;" /> <br> <BR>
Child range:<br>
<input id="child1" type="range" name="range" step="1" value="0" min="0" max="200" 0/>
<input id="child2" type="range" name="range" step="1" value="0" min="0" max="200" />
<h3>when i change Main range i want change child range with Main
</h3>
If you want live feedback as the range changes without waiting for mouse release, you could listen oninput
var rangeMain = document.getElementById('main'),
rangeChild1 = document.getElementById('child1'),
rangeChild2 = document.getElementById('child2');
rangeMain.onchange = function(){
rangeChild1.value = this.value;
rangeChild2.value = this.value;
}
rangeMain.oninput = function(){
rangeChild1.value = this.value;
rangeChild2.value = this.value;
}
Main:<input id="main" type="range" name="range" step="1" value="0" min="0" max="200" 0 style="width:100%;" /> <br> <BR>
Child range:<br>
<input id="child1" type="range" name="range" step="1" value="0" min="0" max="200" 0/>
<input id="child2" type="range" name="range" step="1" value="0" min="0" max="200" />
<h3>when i change Main range i want change child range with Main
</h3>
Related
Is there something wrong with the way I have formatted it or will I have to go the JavaScript route? I'm looking for the code to update automatically to whatever number I have set the slider to or vise versa.
<div>
<input class="value" id="amount" type="number" value="10" min="0" max="50" oninput="rangeInput.value=amount.value">
<input class="slider" id="rangeInput" type="range" value="10" min="0" max="50" oninput="amount.value=rangeInput.value">
</div>
<div>
<input class="value" id="amount" type="number" value="10" min="0" max="50" oninput="rangeInput.value=amount.value">
<input class="slider" id="rangeInput" type="range" value="10" min="0" max="50" oninput="amount.value=rangeInput.value">
</div>
<div>
<input class="value" id="amount" type="number" value="10" min="0" max="50" oninput="rangeInput.value=amount.value">
<input class="slider" id="rangeInput" type="range" value="10" min="0" max="50" oninput="amount.value=rangeInput.value">
</div>
<div>
<input class="value" id="amount" type="number" value="10" min="0" max="50" oninput="rangeInput.value=amount.value">
<input class="slider" id="rangeInput" type="range" value="10" min="0" max="50" oninput="amount.value=rangeInput.value">
</div>
<div>
<input class="value" id="amount" type="number" value="10" min="0" max="50" oninput="rangeInput.value=amount.value">
<input class="slider" id="rangeInput" type="range" value="10" min="0" max="50" oninput="amount.value=rangeInput.value">
</div>
<div>
<input class="value" id="amount" type="number" value="10" min="0" max="50" oninput="rangeInput.value=amount.value">
<input class="slider" id="rangeInput" type="range" value="10" min="0" max="50" oninput="amount.value=rangeInput.value">
</div>
It would be better to call a simple function to get the other input and set it's value regardless of ID. This goes to the parent element and then finds the child that doesn't match the same type of the initial input and sets it's value.
Just for future reference, it is not good practice to have elements with the same ID: https://html.spec.whatwg.org/multipage/dom.html#the-id-attribute
function setValue(input) {
let val = input.value;
let selector = `input:not([type=${input.getAttribute('type')}])`;
let otherInput = input.parentElement.querySelectorAll(selector);
otherInput[0].value = val;
}
<div>
<input class="value" type="number" value="10" min="0" max="50" oninput="setValue(this)">
<input class="slider" type="range" value="10" min="0" max="50" oninput="setValue(this)">
</div>
<div>
<input class="value" type="number" value="10" min="0" max="50" oninput="setValue(this)">
<input class="slider" type="range" value="10" min="0" max="50" oninput="setValue(this)">
</div>
<div>
<input class="value" type="number" value="10" min="0" max="50" oninput="setValue(this)">
<input class="slider" type="range" value="10" min="0" max="50" oninput="setValue(this)">
</div>
<div>
<input class="value" type="number" value="10" min="0" max="50" oninput="setValue(this)">
<input class="slider" type="range" value="10" min="0" max="50" oninput="setValue(this)">
</div>
<div>
<input class="value" type="number" value="10" min="0" max="50" oninput="setValue(this)">
<input class="slider" type="range" value="10" min="0" max="50" oninput="setValue(this)">
</div>
<div>
<input class="value" type="number" value="10" min="0" max="50" oninput="setValue(this)">
<input class="slider" type="range" value="10" min="0" max="50" oninput="setValue(this)">
</div>
All I had to do was wrap it in the form tag. Like so...
<form>
<div>
<input class="value" id="amount" type="number" value="10" min="0" max="50" oninput="rangeInput.value=amount.value">
<input class="slider" id="rangeInput" type="range" value="10" min="0" max="50" oninput="amount.value=rangeInput.value">
</div>
</form>
<form>
<div>
<input class="value" id="amount" type="number" value="10" min="0" max="50" oninput="rangeInput.value=amount.value">
<input class="slider" id="rangeInput" type="range" value="10" min="0" max="50" oninput="amount.value=rangeInput.value">
</div>
</form>
<form>
<div>
<input class="value" id="amount" type="number" value="10" min="0" max="50" oninput="rangeInput.value=amount.value">
<input class="slider" id="rangeInput" type="range" value="10" min="0" max="50" oninput="amount.value=rangeInput.value">
</div>
</form>
<form>
<div>
<input class="value" id="amount" type="number" value="10" min="0" max="50" oninput="rangeInput.value=amount.value">
<input class="slider" id="rangeInput" type="range" value="10" min="0" max="50" oninput="amount.value=rangeInput.value">
</div>
</form>
<form>
<div>
<input class="value" id="amount" type="number" value="10" min="0" max="50" oninput="rangeInput.value=amount.value">
<input class="slider" id="rangeInput" type="range" value="10" min="0" max="50" oninput="amount.value=rangeInput.value">
</div>
</form>
<form>
<div>
<input class="value" id="amount" type="number" value="10" min="0" max="50" oninput="rangeInput.value=amount.value">
<input class="slider" id="rangeInput" type="range" value="10" min="0" max="50" oninput="amount.value=rangeInput.value">
</div>
</form>
Here I three groups with range slider and input. I want to apply two things.
Multiplication of range slider and the input.
And at the end Addition of all multiplication.
I have a different ID for all input types.
$(document).ready(function(){
var t_sum=0;
var rs=document.getElementById("range").value;
var am=document.getElementById("amount").value;
var k=0;
$('.mul').each(function(){
i++;
var newID='multiplication-'+k;
$(this).attr('id',newID);
document.getElementById("multiplication").innerHTML = rs * am;
})
document.getElementById("addition").innerHTML= multiplication+k;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="range" class="range" id="range1" min="0" max="12" value="0" step="1">
<input type="text" id="amount1" value="10" disabled ><br>
<input type="range" class="range" id="range2" min="0" max="12" value="0" step="1">
<input type="text" id="amount2" value="20" disabled ><br>
<input type="range" class="range" id="range3" min="0" max="12" value="0" step="1">
<input type="text" id="amount3" value="30" disabled ><br>
<input type="hidden" id="multiplication" class="mul">
Addition of all multiplication <input type="text" id="addition" value="" disabled >
I know the code is wrong.
You can give common class to your amt input as well then use index value of each loop to get value of amt inputs and add total to your addition input.
Demo Code :
$(document).ready(function() {
$(".range").on("change", function() {
var mult = 0;
$('.range').each(function(i) {
var selector_next = parseInt($(".amt:eq(" + i + ")").val()) //get input value
mult += parseInt($(this).val()) * selector_next //multply..
console.log($(".amt:eq(" + i + ")").val(), $(this).val())
})
$("#multiplication").val(mult)
$("#addition").val(mult)
})
$(".range:first").trigger("change")
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<input type="range" class="range" id="range1" min="0" max="12" value="0" step="1">
<!--added class-->
<input type="text" class="amt" id="amount1" value="10" disabled><br>
<input type="range" class="range" id="range2" min="0" max="12" value="0" step="1">
<input type="text" class="amt" id="amount2" value="20" disabled><br>
<input type="range" class="range" id="range3" min="0" max="12" value="0" step="1">
<input type="text" class="amt" id="amount3" value="30" disabled><br>
<input type="hidden" id="multiplication" class="mul"> Addition of all multiplication <input type="text" id="addition" value="addition" disabled>
I want to setup two range sliders in html page and first range slider should not cross the second range slider max value and second slider should not cross the min value of first slider, how do I achieve this.
Min.Length<br><input type="range" id="range_01" name="MinlenRange" min="0" max="100" value="8" oninput="this.form.MinlenInput.value=this.value" />
<input type="number" name="MinlenInput" min="0" max="100" value="8" oninput="this.form.MinlenRange.value=this.value" onkeyup="checkLength1(this)" /><br>
Max.Length<br><input type="range" name="MaxlenRange" min="0" max="100" value="60" oninput="this.form.MaxlenInput.value=this.value" />
<input type="number" name="MaxlenInput" min="0" max="100" value="60" oninput="this.form.MaxlenRange.value=this.value" onkeyup="checkLength1(this)" /><br>
The error is : Cannot read property 'MinlenInput' of null, meaning form is null/undefined.
Just wrap your code in a <form> :
<form>
Min.Length<br><input type="range" id="range_01" name="MinlenRange" min="0" max="100" value="8" oninput="this.form.MinlenInput.value=this.value" />
<input type="number" name="MinlenInput" min="0" max="100" value="8" oninput="this.form.MinlenRange.value=this.value" onkeyup="checkLength1(this)" /><br> Max.Length
<br><input type="range" name="MaxlenRange" min="0" max="100" value="60" oninput="this.form.MaxlenInput.value=this.value" />
<input type="number" name="MaxlenInput" min="0" max="100" value="60" oninput="this.form.MaxlenRange.value=this.value" onkeyup="checkLength1(this)" /><br>
</form>
You seem to have two issues. The first, as #JeremyThille pointed out, is you should wrap your form in a <form> element. To solve the second issue (preventing sliders from crossing each other), when the range values change, you need to check to see if they are greater/less than the value in the other range slider. If so, you can change the value accordingly.
I added IDs to your second slider and the text inputs next to each slider, just for this demo. You can refer to them in any way you'd like. I also removed the call to checkLength in the onkeyup attribute of your text inputs.
Note that in the snippet below, you can move the slider handle past the min/max point, but when you let go of the mouse it will snap back to the correct position.
range_01.addEventListener("change", checkMax);
range_01_text.addEventListener("change", checkMax);
range_02.addEventListener("change", checkMin);
range_02_text.addEventListener("change", checkMin);
function checkMax(event) {
if (parseInt(event.target.value) >= parseInt(range_02.value)) {
range_01.value = range_02.value;
range_01_text.value = range_02_text.value;
}
}
function checkMin(event) {
if (parseInt(event.target.value) <= parseInt(range_01.value)) {
range_02.value = range_01.value;
range_02_text.value = range_01_text.value;
}
}
<form>
Min.Length<br><input type="range" id="range_01" name="MinlenRange" min="0" max="100" value="8" oninput="this.form.MinlenInput.value=this.value" />
<input type="number" id="range_01_text" name="MinlenInput" min="0" max="100" value="8" oninput="this.form.MinlenRange.value=this.value" /><br> Max.Length
<br><input type="range" id="range_02" name="MaxlenRange" min="0" max="100" value="60" oninput="this.form.MaxlenInput.value=this.value" />
<input type="number" id="range_02_text" name="MaxlenInput" min="0" max="100" value="60" oninput="this.form.MaxlenRange.value=this.value" /><br>
</form>
I'm creating a form with sliders for answers. I need to be able to show users their current selection. My issue is that this only works for the last question, so the code is functional but doesn't allow any room for expansion.
Try the sliders below and notice that only one of them displays the <span> value and the rest don't.
<input type="range" min="1" max="10" value="0" class="slider" id="question1">
<span id="question1score"></span>
<br><br>
<input type="range" min="1" max="10" value="0" class="slider" id="question2">
<span id="question2score"></span>
<br><br>
<input type="range" min="1" max="10" value="0" class="slider" id="question3">
<span id="question3score"></span>
<br><br>
<input type="range" min="1" max="10" value="0" class="slider" id="question4">
<span id="question4score"></span>
<script>
var slider = document.getElementById("question1");
var output = document.getElementById("question1score");
var slider = document.getElementById("question2");
var output = document.getElementById("question2score");
var slider = document.getElementById("question3");
var output = document.getElementById("question3score");
var slider = document.getElementById("question4");
var output = document.getElementById("question4score");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
}
</script>
Any tips to get all of these to work properly would be greatly appreciated.
Get all sliders by class name and add event listener to them.
When slider get change show the value to related span.
var sliders = document.getElementsByClassName("slider");
for(var i=0; i<(sliders.length); i++) {
sliders[i].addEventListener('input', function() {
document.getElementById(this.getAttribute('id')+'score').innerText = this.value;
});
}
<input type="range" min="1" max="10" value="0" class="slider" id="question1">
<span id="question1score"></span>
<br><br>
<input type="range" min="1" max="10" value="0" class="slider" id="question2">
<span id="question2score"></span>
<br><br>
<input type="range" min="1" max="10" value="0" class="slider" id="question3">
<span id="question3score"></span>
<br><br>
<input type="range" min="1" max="10" value="0" class="slider" id="question4">
<span id="question4score"></span>
I made some code to generate RGB colors but it works after changed but I wish to do it while changing:
<input type="range" id="myNumber" min="0" max="255" onchange="myFunction()" value="0" />
<input type="range" id="myNumber2" min="0" max="255" onchange="myFunction()" value="0" />
<input type="range" id="myNumber3" min="0" max="255" onchange="myFunction()" value="0" />
<p id="demo">Blalalalala</p>
<script>
function myFunction() {
var x = document.getElementById("myNumber").value;
var y = document.getElementById("myNumber2").value;
var z = document.getElementById("myNumber3").value;
document.getElementById("demo").style.transition = 'background 0.5s ease 0s';
document.getElementById("demo").style.background = 'rgb('+x+','+y+','+z+')';
}
</script>
UPDATE!
WITH ANSWER I ADDED A FOR OPACITY AND HERE IS FULL CODE IF SOMEBODY NEEDS
<p>R (Stands for red):
<input type="range" id="myNumber" min="0" max="255" step="1" oninput="myFunction()" value="0" /></p>
<p>G (Stands for green):
<input type="range" id="myNumber2" min="0" max="255" step="1" oninput="myFunction()" value="0" /></p>
<p>B (Stands for blue):
<input type="range" id="myNumber3" min="0" max="255" step="1" oninput="myFunction()" value="0" /></p>
<p>A (Stands for opacity):
<input type="range" id="myNumber4" min="0" max="1" step="0.1" oninput="myFunction()" value="1" /></p>
<p id="demo">sasasasa</p>
<script>
document.getElementById("demo").style.background = 'rgb(0,0,0,1)';
function myFunction() {
var x = document.getElementById("myNumber").value;
var y = document.getElementById("myNumber2").value;
var z = document.getElementById("myNumber3").value;
var a = document.getElementById("myNumber4").value;
document.getElementById("demo").style.transition = 'background 0.5s ease 0s';
document.getElementById("demo").style.background = 'rgba('+x+','+y+','+z+','+a+')';
}
</script>
Use HTML5 input event instead of change event.
<input type="range" id="myNumber" min="0" max="255" oninput="myFunction()" value="0" />
<input type="range" id="myNumber2" min="0" max="255" oninput="myFunction()" value="0" />
<input type="range" id="myNumber3" min="0" max="255" oninput="myFunction()" value="0" />
<p id="demo">Blalalalala</p>
<script>
function myFunction() {
var x = document.getElementById("myNumber").value;
var y = document.getElementById("myNumber2").value;
var z = document.getElementById("myNumber3").value;
document.getElementById("demo").style.transition = 'background 0.5s ease 0s';
document.getElementById("demo").style.background = 'rgb(' + x + ',' + y + ',' + z + ')';
}
</script>
Check browser compatibility of input event.
onchange should only be triggered when the user releases the mouse. To get continuous updates, you should use the oninput event, which will capture live updates in Firefox, Safari and Chrome, both from the mouse and the keyboard.
However, oninput is not supported in IE10, so your best bet is to combine the two event handlers, like this:
<input type="range" id="myNumber" min="0" max="255" onchange="myFunction()" oninput="myFunction()" value="0" />