Get the inherited value of responsive control based on another responsive control

[mtumbarello-eness]

Prerequisites

• I have searched for similar feature requests in both open and closed discussions and cannot find an existing request.
• I have verified that the feature is still missing from the latest stable versions of Elementor or Elementor Pro.

What problem is your feature request going to solve? Please describe..

I'm making a widget where I have a responsive control "linked" with another one. To explain, i want to display x elements (from 1 to 5) (count_rea) and their width depend on the gap value I put in another control (realisations_horizontal_space).

When I change the number of elements in responsive, the gap value of the breakpoint i'm in won't get the inherited one, I have to re-enter it if I want my calc to be updated. I guess that count_rea ONLY tries to find the value of the current breakpoint, and that is the problem I encounter.

Here is the code :

$widget->add_responsive_control(
        'realisations_horizontal_space',
        [
            'label'     => esc_html__('Espace horizontal', 'elementor-realisation'),
            'type' => Controls_Manager::SLIDER,
            'size_units' => ['px', 'em', '%', "custom"],
            'range' => [
                'px' => [
                    'min' => 0,
                    'max' => 200,
                ],
                'em' => [
                    'min' => 0,
                    'max' => 20,
                ],
                '%' => [
                    'min' => 0,
                    'max' => 100,
                ],
            ],
            'selectors' => [
                '{{WRAPPER}} .ae-post-collection' => 'column-gap: {{SIZE}}{{UNIT}};',
            ],
        ]
    );

$widget->add_responsive_control(
            'count_rea',
            [
                'label' => esc_html__('Réas par ligne', 'elementor-realisation'),
                'type' => Controls_Manager::SELECT,
                'options' => [
                    '1' => esc_html__('1', 'elementor-realisation'),
                    '2' => esc_html__('2', 'elementor-realisation'),
                    '3' => esc_html__('3', 'elementor-realisation'),
                    '4' => esc_html__('4', 'elementor-realisation'),
                    '5' => esc_html__('5', 'elementor-realisation'),
                ],
                'default' => '3',
                'selectors' => [
                    '{{WRAPPER}} .ae-post-item' => 'flex: 0 0 calc(100% / {{SIZE}} - ({{realisations_horizontal_space.SIZE}}{{realisations_horizontal_space.UNIT}} * ({{SIZE}} - 1) / {{SIZE}}));',
                ],
            ]
        );

Describe the solution you'd like.

I would like to be able to link 2 responsive controls values so that when we specify the value of another control, it also gets its inherited one.

Describe alternatives you've considered.

No response

Additional context

No response

Agreement

• I agree that my request may be closed without action if it doesn't meet all the requirements.