使用

通过CDN导入：

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

在HTML中添加一个div：
```
<div id="picker"></div>
```

最后在JS中创建：

var colorPicker = new iro.ColorPicker("#picker", {
  // 初始宽度
  width: 320,
  // 初始颜色
  color: "#f00"
});

一个样例

一个非常简单的样例，也就是GIF上显示的样子，可以参考一下：

<!DOCTYPE html>
<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>

我是Mancuoj，欢迎关注交流一起学习！

创建一个简单的色轮

使用

一个样例