背景相对于滑块的变化不正确

Question

所以我正在通过一门课程练习一个项目，其中一个项目是基于颜色盘的，网站生成随机盘，带有一个额外的功能，用户可以改变色调，亮度，饱和度，我在中间的某个地方，但我的滑块并不像预期的那样起作用。如果我改变了色调，背景并没有相应的改变，它一直围绕着某个灰色的颜色旋转，不知怎么的，所有颜色的饱和度就会在开始的时候被卡住。我检查了色调的刻度是否正确。我试着检查console.log进入数组来检查每个初始颜色是否被正确地推入，但这似乎是正确的

请提前帮忙谢谢

这是密码

null

//Global selection and variables
const colorDivs = document.querySelectorAll(".color");
const generateBtn = document.querySelector(".generate");
const sliders = document.querySelectorAll('input[type="range"]');
const currentHexes = document.querySelectorAll(".color h2");
let initialColors;

//Event listeners
sliders.forEach((slider) => {
  slider.addEventListener("input", hslControls);
});
colorDivs.forEach((div, index) => {
  div.addEventListener("change", () => {
    updateTextUI(index);
  });
});
//Functions
//Color generator
function generateHex() {
  const hexColor = chroma.random();
  return hexColor;
}
function checkTextContrast(color, text) {
  const luminance = chroma(color).luminance();

  if (luminance > 0.5) {
    text.style.color = "black";
  } else {
    text.style.color = "white";
  }
}

function randomColors() {
  initialColors = [];
  colorDivs.forEach((div, index) => {
    const hexText = div.children[0];
    const randomColor = generateHex();
    initialColors.push(chroma(randomColor).hex());

    //Add the color to the background
    div.style.backgroundColor = randomColor;
    hexText.innerText = randomColor;
    checkTextContrast(randomColor, hexText);
    //Initialize Colorize sliders
    const color = chroma(randomColor);
    const sliders = div.querySelectorAll(".sliders input");
    const hue = sliders[0];
    const brightness = sliders[1];
    const saturation = sliders[2];
    colorizeSliders(color, hue, brightness, saturation);
  });
  resetInputs();
}
randomColors();
function colorizeSliders(color, hue, brightness, saturation) {
  //Scale Saturation
  const noSat = color.set("hsl.s", 0);
  const fullSat = color.set("hsl.s", 1);
  const scaleSat = chroma.scale([noSat, color, fullSat]);
  //Scale Brightness
  const midBright = color.set("hsl.l", 0.5);

  const scaleBright = chroma.scale(["black", midBright, "white"]);
  //Update input colors
  saturation.style.backgroundImage = `linear-gradient(to right,${scaleSat(
    0
  )}, ${scaleSat(1)})`;
  brightness.style.backgroundImage = `linear-gradient(to right,${scaleBright(
    0
  )},${scaleBright(0.5)} ,${scaleBright(1)})`;
  hue.style.backgroundImage = `linear-gradient(to right, rgb(204,75,75),rgb(204,204,75),rgb(75,204,75),rgb(75,204,204),rgb(75,75,204),rgb(204,75,204),rgb(204,75,75))`;
}
function hslControls(e) {
  const index =
    e.target.getAttribute("data-bright") ||
    e.target.getAttribute("data-sat") ||
    e.target.getAttribute("data-hue");

  let sliders = e.target.parentElement.querySelectorAll('input[type="range"]');
  const hue = sliders[0];
  const brightness = sliders[1];
  const saturation = sliders[2];
  const bgColor = initialColors[index];
  console.log(bgColor);

  let color = chroma(bgColor)
    .set("hsl.s", saturation.value)
    .set("hsl.l", brightness.value)
    .set("hsl.h", hue.value);
  colorDivs[index].style.backgroundColor = color;
}
function updateTextUI(index) {
  const activeDiv = colorDivs[index];
  const color = chroma(activeDiv.style.backgroundColor);
  const textHex = activeDiv.querySelector("h2");
  const icons = activeDiv.querySelectorAll(".controls button");

  textHex.innerText = color.hex();
  //Check Contrast
  checkTextContrast(color, textHex);
  for (icon of icons) {
    checkTextContrast(color, icon);
  }
}
function resetInputs() {
  const sliders = document.querySelectorAll(".sliders input");
  sliders.forEach((slider) => {
    if (slider.name === "hue") {
      const hueColor = initialColors[slider.getAttribute("data-hue")];
      const hueValue = chroma(hueColor).hsl()[0];
      slider.value = Math.floor(hueValue);
    }
    if (slider.name === "brightness") {
      const brightColor = initialColors[slider.getAttribute("data-bright")];
      const brightValue = chroma(brightColor).hsl()[2];
      slider.value = Math.floor(brightValue * 100) / 100;
    }
    if (slider.name === "saturation") {
      const satColor = initialColors[slider.getAttribute("data-sat")];
      const satValue = chroma(satColor).hsl()[1];
      slider.value = (Math.floor(satValue) * 100) / 100;
    }
  });
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: "Mulish", sans-serif;
  color: rgb(51, 51, 51);
}
button {
  font-family: "Mulish", sans-serif;
}
path,
i,
svg {
  pointer-events: none;
}
.colors {
  min-height: 80vh;
  display: flex;
  max-width: 100vw;
  color: rgb(212, 212, 212);
}

.color {
  min-height: 80vh;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  position: relative;
  overflow: hidden;
}

.color h2 {
  font-size: 2rem;
  cursor: pointer;
}
.sliders {
  display: flex;
  flex-direction: column;
  position: absolute;
  bottom: 0%;
  background: rgb(255, 255, 255);
  padding: 1rem;
  width: 80%;
  /* opacity: 0; */
  /* pointer-events: none; */

  /*We are adding adjustment class*/
  /* transform: translateY(100px); */
  transition: all 0.5s ease-in-out;
}
.sliders.active {
  opacity: 1;
  transform: translateY(0px);
  pointer-events: all;
}
.sliders button {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0.5rem;
  border-top-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  border: none;
  background: rgb(75, 75, 75);
  color: white;
  cursor: pointer;
  font-weight: bold;
}
.controls {
  display: flex;
  flex-direction: column;
}

.panel {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  height: 20vh;
}
.panel button {
  font-size: 1.2rem;
  margin: 1rem;
  padding: 1rem 2rem;
  background-color: rgb(31, 33, 63);
  border: none;
  color: white;
  cursor: pointer;
  border-radius: 1rem;
}
.panel p {
  font-size: 1.2rem;
}
.library-panel,
.generate-panel,
.save-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.adjust,
.lock {
  font-size: 2rem;
  border: none;
  background: none;
  cursor: pointer;
  margin: 2rem 0rem;
}
/* Slider stuff */
input[type="range"] {
  -webkit-appearance: none;
  margin: 1rem 0rem;
  width: 100%;
  position: relative;
  border-radius: 1rem;
  cursor: pointer;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="/style.css" />
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Mulish&display=swap"
      rel="stylesheet"
    />

    <title>Document</title>
  </head>
  <body>
    <div class="colors">
      <div class="color">
        <h2>Hex</h2>
        <div class="controls">
          <button class="adjust"><i class="fas fa-sliders-h"></i></button>
          <button class="lock"><i class="fas fa-lock-open"></i></button>
        </div>
        <div class="sliders">
          <button class="close-adjustment">X</button>
            <span>Hue</span>
            <input
              type="range"
              min="0"
              max="360"
              step="1"
              name="hue"
              class="hue-input"
              data-hue="0"
            />
            <span>Brightness</span>
            <input
              type="range"
              min="0"
              max="1"
              step="0.01"
              name="brightness"
              class="bright-input"
              data-bright="0"
            />
            <span>Saturation</span>
            <input
              type="range"
              min="0"
              max="1"
              step="0.01"
              name="saturation"
              class="sat-input"
              data-sat="0"
            />
          
        </div>
      </div>
      <div class="color">
        <h2>Hex</h2>
        <div class="controls">
          <button class="adjust"><i class="fas fa-sliders-h"></i></button>
          <button class="lock"><i class="fas fa-lock-open"></i></button>
        </div>
        <div class="sliders">
          <button class="close-adjustment">X</button>
            <span>Hue</span>
            <input
              type="range"
              min="0"
              max="360"
              step="1"
              name="hue"
              class="hue-input"
              data-hue="1"
            />
            <span>Brightness</span>
            <input
              type="range"
              min="0"
              max="1"
              step="0.01"
              name="brightness"
              class="bright-input"
              data-bright="1"
            />
            <span>Saturation</span>
            <input
              type="range"
              min="0"
              max="1"
              step="0.01"
              name="saturation"
              class="sat-input"
              data-sat="1"
            />
          
        </div>
      </div>
      <div class="color">
        <h2>Hex</h2>
        <div class="controls">
          <button class="adjust"><i class="fas fa-sliders-h"></i></button>
          <button class="lock"><i class="fas fa-lock-open"></i></button>
        </div>
        <div class="sliders">
          <button class="close-adjustment">X</button>
            <span>Hue</span>
            <input
              type="range"
              min="0"
              max="360"
              step="1"
              name="hue"
              class="hue-input"
              data-hue="2"
            />
            <span>Brightness</span>
            <input
              type="range"
              min="0"
              max="1"
              step="0.01"
              name="brightness"
              class="bright-input"
              data-bright="2"
            />
            <span>Saturation</span>
            <input
              type="range"
              min="0"
              max="1"
              step="0.01"
              name="saturation"
              class="sat-input"
              data-sat="2"
            />
          
        </div>
      </div>
          <div class="color">
            <h2>Hex</h2>
            <div class="controls">
              <button class="adjust"><i class="fas fa-sliders-h"></i></button>
              <button class="lock"><i class="fas fa-lock-open"></i></button>
            </div>
            <div class="sliders">
              <button class="close-adjustment">X</button>
                <span>Hue</span>
                <input
                  type="range"
                  min="0"
                  max="360"
                  step="1"
                  name="hue"
                  class="hue-input"
                  data-hue="3"
                />
                <span>Brightness</span>
                <input
                  type="range"
                  min="0"
                  max="1"
                  step="0.01"
                  name="brightness"
                  class="bright-input"
                  data-bright="3"
                />
                <span>Saturation</span>
                <input
                  type="range"
                  min="0"
                  max="1"
                  step="0.01"
                  name="saturation"
                  class="sat-input"
                  data-sat="3"
                />
              
            </div>
          </div>
      
      <div class="color">
        <h2></h2>
        <div class="controls">
          <button class="adjust"><i class="fas fa-sliders-h"></i></button>
          <button class="lock"><i class="fas fa-lock-open"></i></button>
        </div>
        <div class="sliders">
          <button class="close-adjustment">X</button>
            <span>Hue</span>
            <input
              type="range"
              min="0"
              max="360"
              step="1"
              name="hue"
              class="hue-input"
              data-hue="4"
            />
            <span>Brightness</span>
            <input
              type="range"
              min="0"
              max="1"
              step="0.01"
              name="brightness"
              class="bright-input"
              data-bright="4"
            />
            <span>Saturation</span>
            <input
              type="range"
              min="0"
              max="1"
              step="0.01"
              name="saturation"
              class="sat-input"
              data-sat="4"
            />
          
        </div>
      </div>
    </div>
    <div class="panel">
      <div class="library-panel">
        <button class="library"><i class="fas fa-book-open"></i></button>
        <p>Library</p>
      </div>
      <div class="generate-panel">
        <button class="generate"><i class="fas fa-sync"> </i></button>
        <p>Generate</p>
      </div>
      <div class="save-panel">
        <button class="generate"><i class="fas fa-save"></i></button>
        <p>Save</p>
      </div>
    </div>
    <div class="copy-container">
      <div class="copy-popup">
      <h3>Copied to clipboard</h3>
      <h4>&#128077</h4>
    </div>
  </div>
  <div class="save-container">
    <div class="save-popup">
      <button class="close-save">X</button>
      <h4>Give a name to your palette</h4>
      <input type="text" max-length="35" class="save-name">
      <button type="submit" class="submit-save"></button>
    </div>
  </div>
  <div class="library-container">
    <div class="library-popup">
      <button class="close-library">X</button>
      <h4>Pick your Palette</h4>
    </div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/all.min.js" 
  integrity="sha512-RXf+QSDCUQs5uwRKaDoXt55jygZZm2V++WUZduaU/Ui/9EGp3f/2KZVahFZBKGH0s774sd3HmrhUy+SgOFQLVQ==" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.1.1/chroma.min.js" integrity="sha512-RWI59o+PDXjPl3bakOf3k2ZbDtfvn/OU/ZKe6QmkE0V/ve7vYKEJe0RdkDueS+VkghBazP+1o4LKGON+pHUa5g==" crossorigin="anonymous"></script>  
  <script src="./app.js"></script>
  </body>
</html>

null

Answer 1

你的颜色很适合我！我只是不得不把饱和滑块上升，因为他们都是从0开始的，导致最初的‘灰色’！