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" />
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>
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 created a program where, when a person reaches that pattern, it will display a text. I am not sue what seems to be wrong with the values.
function validate(){
var slider1 = document.getElementById("slider1");
var slider2 = document.getElementById("slider2");
var slider3 = document.getElementById("slider3");
var slider4 = document.getElementById("slider4");
var slider5 = document.getElementById("slider5");
var slider6 = document.getElementById("slider6");
var slider7 = document.getElementById("slider7");
if(slider2==16.5 && slider3==33 && slider4==49.5 && slider5==66 && slider6==82.5 && slider2==99){
document.getElementById("demo").innerHTML = 5 + 6;
};
};
<div class="activity">
<div id="rangeInputs" class="inputsss">
<input id="slider1" disabled class="range" type="range" min="0" max="100" value="0"><br>
<input id="slider2" class="range" type="range" min="0" max="1" step="0.165" value="0"><br>
<input id="slider3" class="range" type="range" min="0" max="99" value="16.5" step="16.5"><br>
<input id="slider4" class="range" type="range" min="0" max="99" value="16.5" step="16.5"><br>
<input id="slider5" class="range" type="range" min="0" max="99" value="16.5" step="16.5"><br>
<input id="slider6" class="range" type="range" min="0" max="99" value="16.5" step="16.5"><br>
<input id="slider7" class="range" type="range" min="0" max="99" step="16.5" value="0"><br>
</div>
</div>
<p id="demo"></p>
You need to get the values:
var slider1 = parseFloat(document.getElementById("slider1").value);
var slider2 = parseFloat(document.getElementById("slider2").value);
var slider3 = parseFloat(document.getElementById("slider3").value);
var slider4 = parseFloat(document.getElementById("slider4").value);
var slider5 = parseFloat(document.getElementById("slider5").value);
var slider6 = parseFloat(document.getElementById("slider6").value);
var slider7 = parseFloat(document.getElementById("slider7").value);
We are in ES6 guys ! (use sliderX.valueAsNumber)
const
f_rangeInputs = document.getElementById("rangeInputs"),
demo = document.getElementById("demo");
var SliderX = {};
document.querySelectorAll('#rangeInputs input[type=range]').forEach(elm=> SliderX[elm.id]=elm );
function validate() {
demo.textContent = ' x / 16.5 / 33 / 49.5 / 66 / 82.5 / 99 ';
if ( SliderX.slider2.valueAsNumber==16.5
&& SliderX.slider3.valueAsNumber==33
&& SliderX.slider4.valueAsNumber==49.5
&& SliderX.slider5.valueAsNumber==66
&& SliderX.slider6.valueAsNumber==82.5
&& SliderX.slider7.valueAsNumber==99
){
demo.textContent = (5 + 6).toString();
}
}
function changedSlider(e) {
this.nextSibling.textContent = this.value;
validate() ;
}
for(let elm in SliderX) { SliderX[elm].onchange = changedSlider };
f_rangeInputs.onreset = ()=> { for(let elm in SliderX) { SliderX[elm].nextSibling.textContent = SliderX[elm].value } }
f_rangeInputs.reset();
div {
display: inline-block;
padding: 20px;
border: 20px;
background-color: cadetblue;
border: 2px solid grey;
}
<div class="activity">
<form id="rangeInputs" class="inputsss">
<input id="slider1" class="range" type="range" min="0" max="100" value="0" step="10" disabled ><span></span><br>
<input id="slider2" class="range" type="range" min="0" max="99" value="16.5" step="16.5"><span></span><br>
<input id="slider3" class="range" type="range" min="0" max="99" value="16.5" step="16.5"><span></span><br>
<input id="slider4" class="range" type="range" min="0" max="99" value="16.5" step="16.5"><span></span><br>
<input id="slider5" class="range" type="range" min="0" max="99" value="16.5" step="16.5"><span></span><br>
<input id="slider6" class="range" type="range" min="0" max="99" value="16.5" step="16.5"><span></span><br>
<input id="slider7" class="range" type="range" min="0" max="99" value="0" step="16.5" ><span></span><br>
</form>
</div>
<p id="demo"> x / 16.5 / 33 / 49.5 / 66 / 82.5 / 99 </p>
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>