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

Question

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:

0
2 weeks 2022-01-15T05:52:17-05:00 0 Answers 0 views 0