The main server, and probably only repository in this org.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

34 lines
745 B

  1. import React, {useLayoutEffect} from "react";
  2. import {randId} from "../../Helpers/random";
  3. import iro from "@jaames/iro";
  4. function BrightnessSlider({brightness, onChange}) {
  5. const random = randId();
  6. useLayoutEffect(() => {
  7. console.log(brightness);
  8. const colorPicker = new iro.ColorPicker("#color-picker-" + random, {
  9. color: `rgb(${brightness}, ${brightness}, ${brightness})`,
  10. layout: [
  11. {
  12. component: iro.ui.Slider,
  13. options: {
  14. borderColor: '#888'
  15. }
  16. }
  17. ],
  18. });
  19. colorPicker.on("input:end", color => {
  20. onChange(color.rgb.r);
  21. })
  22. }, []);
  23. return (
  24. <div id={`color-picker-${random}`}>
  25. </div>
  26. );
  27. }
  28. export default BrightnessSlider;