// Default
var defaultPicker = new iro.ColorPicker("#defaultPicker", {
  width: 150,
  color: "rgb(255, 0, 0)",
  borderWidth: 0,
  borderColor: "#fff",
  layout: [
    {
      component: iro.ui.Wheel,
      options: {
        sliderType: 'value'
      }
    },
    {
      component: iro.ui.Slider,
      layoutDirection: 'horizontal',
      options: {
        sliderType: 'value',
        sliderSize: 10,
      }
    },
  ]
});

// Wheel only
var wheelPicker = new iro.ColorPicker("#wheelPicker", {
  width: 150,
  color: "rgb(255, 0, 0)",
  borderWidth: 0,
  borderColor: "#fff",
  layout: [
    {
      component: iro.ui.Wheel,
    },
  ]
});

// Slider
var sliderPicker = new iro.ColorPicker("#sliderPicker", {
  width: 150,
  color: "rgb(255, 0, 0)",
  borderWidth: 0,
  borderColor: "#fff",
  layoutDirection: 'horizontal',
  layout: [
    {
      component: iro.ui.Slider,
      options: {
        sliderType: 'value',
        sliderSize: 20,
      }
    },
  ]
});
