Create a range slider to change font-size with different screens sizes in wordpress customizer api

I have been trying to create a theme customizer to change the font size. To do that I have created settings and control. But the issue is I am unable to achieve like as shown in the image. I have used the range input type to adjust the value and it updates according to the increased or decreased value. I want to have a slider with a box that indicates the value and can be used to change the value by entering a value for each screen size such as Desktop, Tablet and Mobile.

And also is it possible to change the CSS file by customizer? Now I am just outputting the inline CSS.

the code that i have done is:

$wp_customize-add_setting( 'ltr_font-size', [ 
         'default' = '16px'
     ] );
    
    $wp_customize-add_section( 'ltr_section', [
        'title' = __( 'Custom Settings', 'ltr2022' ),
        'priority' = 30    
     ] );

     $wp_customize-add_control( new WP_Customize_Control(
        $wp_customize,
        'ltr_font-setting',
        array(
            'label'          = __( 'font-size', 'latracal' ),
            'section'        = 'ltr_section',
            'settings'       = 'ltr_font-size',
            'type' = 'range',
            'input_attrs' = array(
                'min' = 16,
                'max' = 20,
                // 'step' = 2,
              )
        )
    ) );

outputting inline css

?php
function mytheme_customize_css() {
?
style type=text/css
main {

    font-size: ?php echo get_theme_mod('ltr_font-size', '16px');

    ?px;

}
/style
?php
}

This is what I have achieved: