How do I return a value from addEventListener so as to be used by another object

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