I using your beautifull colorpickers.
But i would like to make something, but can't figger it out how to.

I want 2 component next to each other, these are in 1 iro.ColorPickers.
Then i want a slider undernead it. This is in a different iro.ColorPickers.
The idea, when i pick a color in the circles, the slider also change to the chosen color. And the other way around, when i modify the color in the slider, the circles also change

I prefer to have them all in 1 iro.ColorPickers, but when i to, the slider is on the right of the circles. When doing this, then all selector-circles change. That is what i am looking for, but then with the slider undernead the color-circles
I would like that the slider is undernead them an other width. See image what i would like

You can see, the de slider is red and not the same color as the circles.
How can i make them works as a group?

The code i have now

 var colorPicker = new iro.ColorPicker("#demoWheel", {
 width: 290,
 height: 360,
 handleRadius: 8,
 activeHandleRadius: 8,
 handleUrl: null,
 handleOrigin: {y: 0, x: 0},
 color: rgb, // RGB is update by an other function.
 borderWidth: 2,
 borderColor: 'black',
 padding: 8,
 wheelLightness: true,
 layoutDirection: 'horizontal',
 margin: 120,
 layout: [
 {
 component: iro.ui.Wheel,
 options: {
 wheelDirection: 'clockwise',
 wheelAngle: 60,
 }
 },
 {
 component: iro.ui.Slider,
 options: {
 sliderType: 'kelvin',
 sliderShape: 'circle',
 minTemperature: 2200,
 maxTemperature: 11000,
 }
 },
 ]
 });
 var sliderPicker = new iro.ColorPicker("#sliderPicker", {
 width: 750,
 color: "rgb(255, 0, 0)",
 borderWidth: 1,
 borderColor: '#FFF',
 layout: [
 {
 component: iro.ui.Slider,
 options: {
 sliderType: 'value'
 }
 },
 ]
 });