Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Simple, in fact, is to adjust the library!

Documentation to Get Started here | iro. Js

I’ve also written a simple sample below that can be found at 😉

use

  1. Import through CDN:

    <script src="https://cdn.jsdelivr.net/npm/@jaames/iro@5"></script>
Copy the code

  2. Add a div to your HTML:

    <div id="picker"></div>
Copy the code

  3. Finally create in JS:

    var colorPicker = new iro.ColorPicker("#picker", {
  // The initial width
  width: 320.// The initial color
  color: "#f00"
});
Copy the code

A sample

A very simple example, which is what the GIF looks like, can be referenced:

<! DOCTYPEhtml>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Mancuoj</title>
        <script src="https://cdn.jsdelivr.net/npm/@jaames/iro@5"></script>
        <style>
            body {
                background-color: #fff;
                min-height: 90vh;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            #indicator {
                width: 200px;
                height: 200px;
                background-color: #f00;
                border-radius: 25px;
            }

            #picker {
                margin-left: 40px;
            }
        </style>
    </head>
    <body>
        <div id="indicator"></div>
        <div id="picker"></div>
        <script>
            let colorIndicator = document.getElementById('indicator');
            let colorPicker = new iro.ColorPicker("#picker", {
                width: 320.color: "#f00"
            });
            colorPicker.on('color:change'.function(color) {
                colorIndicator.style.backgroundColor = color.hexString;
            });
        </script>
    </body>
</html>
Copy the code

I am Mancuoj, welcome to pay attention to exchange and learn together!