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>
Related
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>
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'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>
Heres the situation:
I have two range sliders:
<input id="rangeOne" disabled class="range" type="range" min="0" max="10" value="3">
and
<input id="rangeTwo" class="range" type="range" min="0" max="10" value="8">
If rangeTwo equals rangeOne, it's opacity must change to 0.5, but I have absolutely no idea how to make the JavaScript change values in CSS.
This is what I have so far as my JavaScript:
function changeAction() {
if (rangeTwo.value == rangeOne.value) {
document.getElementById("rangeTwo").style.opacity = 0.5;;
}
}
You can check the range on input event for equality to set the opacity property:
document.querySelector('#rangeTwo').addEventListener('input', function(){
if(this.value < document.querySelector('#rangeOne').value)
this.style.opacity = 0.5;
else
this.style.opacity = 1;
});
<input id="rangeOne" disabled class="range" type="range" min="0" max="10" value="3">
<input id="rangeTwo" class="range" type="range" min="0" max="10" value="8">
Seems to work for me:
function changeAction() {
if (rangeTwo.value == rangeOne.value) {
document.getElementById("rangeTwo").style.opacity = 0.5;
}
}
<input id="rangeOne" disabled class="range" type="range" min="0" max="10" value="3" onchange="changeAction()">
<input id="rangeTwo" class="range" type="range" min="0" max="10" value="8" onchange="changeAction()">
It works perfectly - also note the ;; at the end of your statement. I've hooked the code up to a button, and also added an else so it changes the opacity back if the two are not equal:
function changeAction() {
if (rangeTwo.value == rangeOne.value) {
document.getElementById("rangeTwo").style.opacity = 0.5;
} else {
document.getElementById("rangeTwo").style.opacity = 1;
}
}
<input id="rangeOne" disabled class="range" type="range" min="0" max="10" value="3">
<input id="rangeTwo" class="range" type="range" min="0" max="10" value="8">
<button onclick="changeAction()">Change Action</button>
I notice that both yourself and the other posters have all advocated setting the style attribute on the element in response to external events. I'm of the opinion you should apply/remove a class that effects the same styling.
As such, I've gone about it thusly:
"use strict";
function byId(id){return document.getElementById(id)}
window.addEventListener('load', onWindowLoaded, false);
function onWindowLoaded(evt)
{
byId('rangeTwo').addEventListener('input', onRange2Change, false);
}
function onRange2Change(evt)
{
if (this.value == byId('rangeOne').value)
this.classList.add('seeThrough');
else
this.classList.remove('seeThrough');
}
.seeThrough
{
opacity: 0.5;
}
<input id="rangeOne" disabled class="range" type="range" min="0" max="10" value="3">
<input id="rangeTwo" class="range" type="range" min="0" max="10" value="8">
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>