php – 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.

enter image description here

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(
            '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

function mytheme_customize_css() {
<style type="text/css">
main {

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



This is what I have achieved:

enter image description here

Trushar Gavit 11 months 2022-01-15T05:52:17-05:00 0 Answers 0 views 0

Leave an answer