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">
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>
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 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" />
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>