HTML & Js Color Picker: What am I doing wrong?

Question

The problem is, no matter what control you're on, it will just affect the blue color.

I'm guessing it might have something to do with the fact that I'm declaring the controls and assigning their handlers in a loop, but I honestly don't know what I'm doing wrong or if the solution is to just do that manually, one by one.

Here's a copy of the project.

let 
  // This one will contain all the elements
  picker = document.createElement("div")
  // And this one the color controls
, values = document.createElement("form")
  // This' the color preview
, preview = document.createElement("div")
  // The preview initializes and updates based on this values
, colors = { red : 200, green : 0, blue : 0 }
  // This validates if a value is between 0 and 255
, vv = { min : 0, max : 255 }
, validVal = (n) => vv.min <= n && n <= vv.max
  // And this' just a style string
, style = ""
;

// This one changes preview's bg color and shows the 
// value inside it
function updatePreview() {
  let rgbString = 
    "rgb(" 
  + [colors.red, colors.green, colors.blue].join(",") 
  + ")";

  preview.style["background-color"] = rgbString;
  preview.innerHTML = rgbString;
}

// Now we define the elements' class names
picker.className  += " color-picker"; 
values.className  += " rgb-values";
preview.className += " preview";

// And their appearance
style += "display : inline-block;";
values.style = style;

style += "width: 200px; height: 200px; border: 1px solid #000;";
preview.style = style;

// Then we add'em to the screen
picker.appendChild(values);
picker.appendChild(preview);
document.body.appendChild(picker);

// And, "finally", we add the controls and their handlers
// One for each color
for (var color in colors) {
  // This are text and slide controls
  let  
    label = document.createElement("label")
  , span  = document.createElement("span")
  , slide = document.createElement("input")
  , text  = document.createElement("input")
  ;

  // We define their general attributes
  label.style = "display: block";

  slide.name = color + "-slide";
  slide.type = "range";
  slide.min  = vv.min;
  slide.max  = vv.max;
  slide.step = "1";

  text.name = color + "-text";
  text.type = "text";
  text.size = "3";

  span.innerHTML = " " + color;

  // And set their initial values
  slide.value = text.value = colors[color];

  // We add'em to screen also
  label.appendChild(slide);
  label.appendChild(text);
  label.appendChild(span);
  values.appendChild(label);

  // And now the handlers
  /* 
    This is the tricky part. 
    I must be doing something wrong here. I guess.
    Pls, help!
  */
  function slideHandler(e) {
    text.value = slide.value;
    colors[color] = slide.value;
    updatePreview();
  }

  slide.oninput = slideHandler;

  function textHandler(e) {
    if (validVal(text.value)) slide.value = text.value;
    colors[color] = slide.value;
    updatePreview();
  }

  text.onchange = textHandler; 
}

// And... Showtime!
updatePreview();

Answer 1

Change the var color for slide.name.split('-')[0]

CODE:

  function slideHandler(e) {(
    text.value = slide.value;
    colors[slide.name.split('-')[0]] = slide.value;
    updatePreview();)}

 (function() { window.onload = function() { let // This one will contain all the elements picker = document.createElement("div") // And this one the color controls , values = document.createElement("form") // This' the color preview , preview = document.createElement("div") // The preview initializes and updates based on this values , colors = { red: 200, green: 0, blue: 0 } // This validates if a value is between 0 and 255 , vv = { min: 0, max: 255 }, validVal = (n) => vv.min <= n && n <= vv.max // And this' just a style string , style = ""; // This one changes preview's bg color and shows the // value inside it function updatePreview() { let rgbString = "rgb(" + [colors.red, colors.green, colors.blue].join(",") + ")"; preview.style["background-color"] = rgbString; preview.innerHTML = rgbString; } // Now we define the elements' class names picker.className += " color-picker"; values.className += " rgb-values"; preview.className += " preview"; // And their appearance style += "display : inline-block;"; values.style = style; style += "width: 200px; height: 200px; border: 1px solid #000;"; preview.style = style; // Then we add'em to the screen picker.appendChild(values); picker.appendChild(preview); document.body.appendChild(picker); // And, "finally", we add the controls and their handlers // One for each color for (var color in colors) { // This are text and slide controls let label = document.createElement("label"), span = document.createElement("span"), slide = document.createElement("input"), text = document.createElement("input"); // We define their general attributes label.style = "display: block"; slide.name = color + "-slide"; slide.type = "range"; slide.min = vv.min; slide.max = vv.max; slide.step = "1"; text.name = color + "-text"; text.type = "text"; text.size = "3"; span.innerHTML = " " + color; // And set their initial values slide.value = text.value = colors[color]; // We add'em to screen also label.appendChild(slide); label.appendChild(text); label.appendChild(span); values.appendChild(label); // And now the handlers /* This is the tricky part. I must be doing something wrong here. I guess. Pls, help! */ function slideHandler(e) { text.value = slide.value; colors[slide.name.split('-')[0]] = slide.value; updatePreview(); } slide.oninput = slideHandler; function textHandler(e) { if (validVal(text.value)) slide.value = text.value; colors[slide.name.split('-')[0]] = slide.value; updatePreview(); } text.onchange = textHandler; } // And... Showtime! updatePreview(); }; })(); 

 <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> </body>