
var colorPicker = new iro.ColorPicker("#demoWheel", {
  width: 290,
  height: 360,
  handleRadius: 8,
  handleUrl: null,
  // handleUrl: "#test",
  handleOrigin: {y: 0, x: 0},
  color: "#f00",
  borderWidth: 2,
  padding: 8,
  wheelLightness: true,
  wheelAngle: 270,
  wheelDirection: 'anticlockwise',
  layout: [
    {
      component: iro.ui.Wheel,
      options: {
      }
    },
    {
      component: iro.ui.Slider,
      options: {
      }
    },
    {
      component: iro.ui.Slider,
      options: {
        sliderType: 'hue'
      }
    },
    {
      component: iro.ui.Slider,
      options: {
        sliderType: 'saturation'
      }
    },
    {
      component: iro.ui.Slider,
      options: {
        sliderType: 'kelvin'
      }
    }
  ]
});

colorPicker.on('mount', function() {
  console.log('mount')
});

colorPicker.on('color:change', function() {
  console.log('color:change');
})

colorPicker.on('input:change', function(color) {
  console.log('input:change');
})

colorPicker.on(['color:init', 'color:change'], function() {
  console.log('color:change or color:init');
})
@@ -188,16 +188,19 @@
 #f00%22,%0A 
+ //
  borderW
@@ -208,16 +208,16 @@
 dth: 2,%0A
-
   paddin
@@ -300,16 +300,47 @@
 kwise',%0A
+  layoutDirection: 'vertical',%0A
   layout
@@ -410,32 +410,92 @@
  %7D%0A    %7D,%0A    %7B%0A
+      component: iro.ui.Box,%0A      options: %7B%7D%0A    %7D,%0A    %7B%0A
       component:
@@ -519,32 +519,60 @@
      options: %7B%0A
+        sliderType: 'alpha'%0A
       %7D%0A    %7D,%0A 
@@ -849,14 +849,143 @@
 e: '
-kelvin
+value'%0A      %7D%0A    %7D,%0A    %7B%0A      component: iro.ui.Slider,%0A      options: %7B%0A        sliderType: 'kelvin',%0A        sliderShape: 'circle
 '%0A  
@@ -995,16 +995,17 @@
  %7D%0A    %7D
+,
 %0A  %5D%0A%7D);
@@ -1002,24 +1002,27 @@
 %7D,%0A  %5D%0A%7D);%0A%0A
+// 
 colorPicker.
@@ -1038,32 +1038,35 @@
 ', function() %7B%0A
+// 
   console.log('m
@@ -1072,16 +1072,19 @@
 mount')%0A
+// 
 %7D);%0A%0Acol
@@ -1204,24 +1204,55 @@
 on(color) %7B%0A
+  console.log(color.hexString)%0A
   console.lo
@@ -1266,32 +1266,368 @@
 t:change');%0A%7D)%0A%0A
+colorPicker.on('input:start', function(color) %7B%0A  console.log(color.hexString)%0A  console.log('input:start');%0A%7D)%0A%0AcolorPicker.on('input:move', function(color) %7B%0A  console.log(color.hexString)%0A  console.log('input:move');%0A%7D)%0A%0AcolorPicker.on('input:end', function(color) %7B%0A  console.log(color.hexString)%0A  console.log('input:end');%0A%7D)%0A%0A// 
 colorPicker.on(%5B
@@ -1662,32 +1662,35 @@
 %5D, function() %7B%0A
+// 
   console.log('c
@@ -1714,14 +1714,17 @@
 lor:init');%0A
+// 
 %7D)

update demo script