Discussion on: Accessible Color Pickers

View post

@madsstoumann
How do you access the values of the sliders when the input changed either via auto update or when clicking ok? Non of my event listeners work. Also maybe as enhancement, when you click outside, do not focus the input anymore. I think you made it that way so you keep the focus after pressing ESC while using keyboard only but the focus is not needed when clicking outside.

const logValue = (e) => {
  console.log(e.target.value);
};

const main = () => {
  const colorPickers = document.querySelectorAll('[data-colorpicker]');
  colorPickers.forEach((colorPicker) => {
    let pcr = new ColorPicker(colorPicker, colorPicker.dataset);

    console.log(pcr.value);

    colorPicker.addEventListener('input', logValue, false);
    colorPicker.addEventListener('change', logValue, false);
  });
};