Issue
What I am trying to make is three sliders that can change the color of a div when it is changed. Each slider is okay and I can check the value as it changes in the console. The challenge I am getting is when I try to assign that value outside the eventListener it doesn't change anything.
Here is the simple code of the project:
var redslider = document.getElementById('r')
var greenslider = document.getElementById('g')
var blueslider = document.getElementById('b')
//the above will take slider and have them as variables
const changebg = document.getElementById('rangeValue')
var red = ''
var green = ''
var blue = ''
redslider.addEventListener('input', (e) => {
console.log(`the value of red is ${redslider.value}`)
// redslider.value = red
})
greenslider.addEventListener('input', (e) => {
console.log(`the value of green is ${greenslider.value}`)
// greenslider.value = green
})
blueslider.addEventListener('input', (e) => {
console.log(`the value of blue is ${blueslider.value}`)
// blueslider.value = blue
})
changebg.style.backgroundColor = `rgb(${red}, ${green}, ${blue})`;
body {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.maincontainer {
width: 50%;
height: 50%;
border-radius: 20px;
background: hsla(22, 100%, 78%, 1);
background: linear-gradient(90deg, hsla(22, 100%, 78%, 1) 0%, hsla(19, 95%, 76%, 1) 13%, hsla(17, 94%, 75%, 1) 32%, hsla(2, 78%, 62%, 1) 100%);
background: -moz-linear-gradient(90deg, hsla(22, 100%, 78%, 1) 0%, hsla(19, 95%, 76%, 1) 13%, hsla(17, 94%, 75%, 1) 32%, hsla(2, 78%, 62%, 1) 100%);
background: -webkit-linear-gradient(90deg, hsla(22, 100%, 78%, 1) 0%, hsla(19, 95%, 76%, 1) 13%, hsla(17, 94%, 75%, 1) 32%, hsla(2, 78%, 62%, 1) 100%);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 20px;
}
.slider {
display: flex;
justify-content: center;
align-items: center;
border-radius: 20px;
width: 70%;
height: 50px;
background: white;
}
.slider input {
width: 90%;
}
.valuee {
position: absolute;
width: 200px;
height: 200px;
top: 40px;
left: 50px;
/* background-color: rgba(43, 46, 43,0.5); */
border: 2px solid black;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
}
<div class="maincontainer">
<div class="slider">
<input type="range" min="0" max="255" value="50" id="r">
<!-- <p id="rangeValue">100</p> -->
</div>
<div class="slider">
<input type="range" min="0" max="255" value="50" id="g">
<!-- <p id="rangeValue">100</p> -->
</div>
<div class="slider">
<input type="range" min="0" max="255" value="50" id="b">
<!-- <p id="rangeValue">100</p> -->
</div>
<div class="valuee" id="rangeValue">100</div>
</div>
as you can see from above I have put the red,blue and green variables to be blank as I want them changed when slider input is changed. I then gave the variables a value e.g blueslider.value = blue
it does not work, the slider even refuses to change after the initial slide. I would love help to understand all these. Thanks.
Here is the fiddle
Solution
As you've fixed moving those pointers - there was an issue in JS.
I created a function which will update background color and also text inside valuee div
var redslider = document.getElementById('r')
var greenslider = document.getElementById('g')
var blueslider = document.getElementById('b')
const changebg = document.getElementById('rangeValue');
//getting values from sliders set by default
var red = redslider.value;
var green = greenslider.value;
var blue = blueslider.value;
function updateValueElement() {
changebg.style.backgroundColor = `rgb(${red}, ${green}, ${blue})`;
changebg.textContent = `${red}, ${green}, ${blue}`;
}
redslider.addEventListener('input',(e)=>{
console.log(`the value of red is ${redslider.value}`);
red = redslider.value;
updateValueElement();
})
greenslider.addEventListener('input',(e)=>{
console.log(`the value of green is ${greenslider.value}`)
green = greenslider.value;
updateValueElement();
})
blueslider.addEventListener('input',(e)=>{
console.log(`the value of blue is ${blueslider.value}`)
blue = blueslider.value;
updateValueElement();
})
//changing text in valuee div and its background on load
updateValueElement();
Answered By - Bejür
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.