elementor addon getting responsive value from another control in selectors property

Question

Hello I'm developing an Elementor plugin that I have a transform setting in my widget like this :

        $repeater->add_responsive_control(
        'rp_translatex_header' , 
        [
            'label' => esc_html('Header Translate X ') , 
            'type' => \Elementor\Controls_Manager::NUMBER , 
            'devices' => [ 'desktop', 'tablet', 'mobile' ],
            'min' => -100,
            'max' => 100,
            'selectors' => [
                '{{WRAPPER}} {{CURRENT_ITEM}} hth' => 'transform:translate({{VALUE}}vw,{{rp_translatey_header.VALUE}}vh)',
            ]
        ]
    );

in selectors I use another control value for translateY , this work well until the responsive mode ! on mobile or tablet the translateY value that come from another control doesn't work and return the desktop value (form target control) for fixing this I should use rp_translatey_header_mobile.VALUE for getting mobile mode value ! but this is not my ideal way to fix this and I'm sure that is a way for doing this I want something like :

'selectors' => [
    // for normal mode (desktop) 
   '{{WRAPPER}} {{CURRENT_ITEM}} div' => 
    'transform:translate({{VALUE}}vw,{{rp_translatey_header.VALUE}}vh)', 

    // for mobile mode  
   '{{WRAPPER}} {{CURRENT_ITEM}} div' => 
    'transform:translate({{VALUE}}vw,{{rp_translatey_header_mobile.VALUE}}vh)', 
 
  ]

Answer 1

I can get value by {{your_control_id.VALUE}} very well by I have problem in responsive mode , {{your_control_id.VALUE}} just return the value on desktop and in mobile mode it will return desktop value again ! what should I do ? with using your_control_id_mobile the proplem will solve but i want to use all mode value ! how can i tell to control and selector in which screen use desktop and mobile

I find the solution! I added two more selectors and just before the {{WRAPPER}} I added (mobile ) / (tablet) /(desktop ) like this :

'selectors' => [
                    '(desktop){{WRAPPER}} {{CURRENT_ITEM}} div' => 'transform:translate({{rp_translatex_text.VALUE}}vw,{{VALUE}}vh)',
                    '(tablet){{WRAPPER}} {{CURRENT_ITEM}} div' => 'transform:translate({{rp_translatex_text_tablet.VALUE}}vw,{{VALUE}}vh)',
                    '(mobile){{WRAPPER}} {{CURRENT_ITEM}} div' => 'transform:translate({{rp_translatex_text_mobile.VALUE}}vw,{{VALUE}}vh)',
                ],

and for each responsive mode, I got the responsive id like your_id_mobile.VALUE!