Trying to dynamically change values of html slider with jquery?

Question

I'm trying to create three sliders with R, G, B values and that gives in result the values you're sliding and a div with the resulting color.

I'm having a really hard time and I don't get why. Please keep in mind I'm really new to jQuery, so there might (and probably there are) some really stupid errors in the syntax.

$(document).ready(function() {
  $(".slider").addEventListener("input", function() {
    let red = $("#red").value;
    let green = $("#green").value;
    let blue = $("#blue").value;
    $("#colorbox").css("background-color", "rgb(" + red + "," + green + "," + blue + ")");
    $("#rgboutput").text = "RGB(" + red + "," + green + "," + blue + ")";
    $("#hexoutput").text = "HEX(#" + rgbtohex(red) + rgbtohex(green) + rgbtohex(blue) + ")";
  }, false)

  function rgbtohex(color) {
    var hex = parseInt(color).toString(16);
    return hex.length == 1 ? "0" + hex : hex;
  }
})

body {
  background-color: #0075FF;
}

.container {
  background-color: #ffffff;
  margin: auto;
  width: 30%;
  padding: 20px 0;
  box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.2);
  font-family: 'Work Sans', sans-serif;
  font-size: 20px;
  font-weight: 500;
  color: #142b37;
  border-radius: 5px;
}

.center {
  display: grid;
  justify-items: center;
}

.wrapper {
  width: 100%;
  text-align: center;
}

input[type="range"] {
  display: inline-block;
  width: 60%;
  margin-left: 10px;
  margin-top: 25px;
}

.output {
  display: inline-block;
  text-align: center;
  margin: 20px 0;
  background-color: blue;
  color: #ffffff;
  padding: 10px 30px;
  font-size: 18px;
  letter-spacing: 0.5px;
  border-radius: 2px;
}

#colorbox {
  width: 3em;
  height: 3em;
  margin: 3% solid black;
  background-color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<div class="container">
  <div class="center">
    <div class="wrapper">
      <p>R</p><input type="range" min="0" max="255" value="0" class="slider" id="red" autocomplete="off">
    </div>
    <div class="wrapper">
      <p>G</p><input type="range" min="0" max="255" value="0" class="slider" id="green" autocomplete="off">
    </div>
    <div class="wrapper">
      <p>B</p><input type="range" min="0" max="255" value="0" class="slider" id="blue" autocomplete="off">
    </div>
    <div class="output" id="rgboutput">
      <p>RGB(0, 0, 0)</p>
    </div>
    <div class="output" id="hexoutput">
      <p>HEX(#000000)</p>
    </div>
    <div id="colorbox"></div> <br>
  </div>
</div>

Answer 1

There's a few issues with your code. Firstly, jQuery does not have an addEventListener() method - that's part of plain JS. You should use the on() method instead. Similarly, there's no text or value properties; they are methods, text() and val() respectively. Finally, you need to update the text of the p elements in #rgboutput and #hexoutput, not the parent elements, so a simple selector tweak is needed there.

With those corrected the code will work, however you can improve the logic further by updating to the latest version of jQuery, 3.6.0 at time of writing, using string interpolation to make your strings easier to comprehend, and using the input event instead of change so that the UI updates as you drag instead of after releasing the slider handle.

With all that said, try this:

jQuery($ => {   
  let $red = $('#red');
  let $green = $('#green');
  let $blue = $('#blue');

  $(".slider").on("input", function() {
    let red = $red.val();
    let green = $green.val();
    let blue = $blue.val();
    
    $("#colorbox").css("background-color", `rgb(${red},${green},${blue})`);
    $("#rgboutput p").text(`RGB(${red},${green},${blue})`);
    $("#hexoutput p").text(`HEX(#${rgbtohex(red)}${rgbtohex(green)}${rgbtohex(blue)})`);
  });
  
  let rgbtohex = color => `00${parseInt(color).toString(16)}`.slice(-2);
})

body {
  background-color: #0075FF;
}

.container {
  background-color: #ffffff;
  margin: auto;
  width: 30%;
  padding: 20px 0;
  box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.2);
  font-family: 'Work Sans', sans-serif;
  font-size: 20px;
  font-weight: 500;
  color: #142b37;
  border-radius: 5px;
}

.center {
  display: grid;
  justify-items: center;
}

.wrapper {
  width: 100%;
  text-align: center;
}

input[type="range"] {
  display: inline-block;
  width: 60%;
  margin-left: 10px;
  margin-top: 25px;
}

.output {
  display: inline-block;
  text-align: center;
  margin: 20px 0;
  background-color: blue;
  color: #ffffff;
  padding: 10px 30px;
  font-size: 18px;
  letter-spacing: 0.5px;
  border-radius: 2px;
}

#colorbox {
  width: 3em;
  height: 3em;
  margin: 3% solid black;
  background-color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<div class="container">
  <div class="center">
    <div class="wrapper">
      <p>R</p>
      <input type="range" min="0" max="255" value="0" class="slider" id="red" autocomplete="off">
    </div>
    <div class="wrapper">
      <p>G</p>
      <input type="range" min="0" max="255" value="0" class="slider" id="green" autocomplete="off">
    </div>
    <div class="wrapper">
      <p>B</p>
      <input type="range" min="0" max="255" value="0" class="slider" id="blue" autocomplete="off">
    </div>
    <div class="output" id="rgboutput">
      <p>RGB(0, 0, 0)</p>
    </div>
    <div class="output" id="hexoutput">
      <p>HEX(#000000)</p>
    </div>
    <div id="colorbox"></div> <br>
  </div>
</div>