Is there a way to insert [ oninput="this.nextElementSibling.value = this.value" ] through JQuery or Javascript to an input field?
<input aria-label="Quantity" size="4" max="10" min="1" value="1" type="range" step="1">
<output>1</output>
Just set up an event listener for the input event.
document.querySelector("input").addEventListener("input", function(){
this.nextElementSibling.value = this.value;
});
<input aria-label="Quantity" size="4" max="10" min="1" value="1" type="range" step="1">
<output>1</output>
Related
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>
How do I get querySelectorAll to return all sliders with name="type" and also value="0"
My current code looks like this:
function getSlider0Values(name) {
const sliders = document.querySelectorAll(`input[name = "${name}"][value='0'] `);
let type_0preference_list = [];
sliders.forEach((range) => {
type_0preference_list.push(range.id);
});
return type_0preference_list;
}
<div class="type_sliders">
<label for="Apples">Apples</label>
<input type="range" name="type" min="0" max="5" value="0" id="Apples" class="type_slider">
<label for="Peaches">Peaches</label>
<input type="range" name="type" min="0" max="5" value="0" id="Peaches" class="type_slider">
<label for="Pears">Pears</label>
<input type="range" name="type" min="0" max="5" value="0" id="Pears" class="type_slider">
</div>
It's currently selecting all sliders, not just the ones with the value 0.
This can be a bit confusing, because while range.value will give you the current value of the slider the test for value='0' in CSS does not get updated on input changing.
You can update the attribute on a change and then your selecting will work. See this answer for a bit more explanation.
One thing you can do is listen for the change event on each input and update the actual attribute accordingly. Alternatively you could just do that in your function and not bother with additional event listeners. It depends on your actual use case.
This snippet does an update on a change by setting an event listener on each input so the value attribute is always uptodate.
//set an event listener on each input so value attribute can be updated
const allSliders = document.querySelectorAll('input.type_slider');
allSliders.forEach((slider) => {
slider.addEventListener('change', function() {
slider.setAttribute('value', slider.value);
});
});
function getSlider0Values(name) {
const sliders = document.querySelectorAll(`input[name = "${name}"][value='0'] `);
let type_0preference_list = [];
sliders.forEach((range) => {
type_0preference_list.push(range.id);
});
return type_0preference_list;
}
<div class="type_sliders">
<label for="Apples">Apples</label>
<input type="range" name="type" min="0" max="5" value="0" id="Apples" class="type_slider">
<label for="Peaches">Peaches</label>
<input type="range" name="type" min="0" max="5" value="0" id="Peaches" class="type_slider">
<label for="Pears">Pears</label>
<input type="range" name="type" min="0" max="5" value="0" id="Pears" class="type_slider">
</div>
<button onclick="console.log(getSlider0Values('type'))">Alter some slider(s) and then click me</button>
Your code is working. You are getting all the sliders because all of theme have name="type" and value="0".
const inputs = Array.from(document.getElementsByTagName('INPUT'));
const handler = (e) => {
const result = inputs.filter((input) => {
return (input.value === '0' && input.name === 'type');
});
console.log(result);
};
document.getElementById('Container').addEventListener('change', handler)
<div id="Container" class="type_sliders">
<label for="Apples">Apples</label>
<input type="range" name="type" min="0" max="5" value="0" id="Apples" class="type_slider">
<label for="Peaches">Peaches</label>
<input type="range" name="type" min="0" max="5" value="0" id="Peaches" class="type_slider">
<label for="Pears">Pears</label>
<input type="range" name="type" min="0" max="5" value="0" id="Pears" class="type_slider">
</div>
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 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>