Multi new iro.ColorPickers which update each other

[Hoeby]

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'
                    }
                  },
                ]
            });