Advanced posts results

Hi.

Wondering if anyone can help with a project I am working on.

I have 10 posts showing on my blog page (index.php).

At the top is a loop that only shows one result and shows popular posts beside it.This block is available on every page that is paginated too.

Underneath is 9 other posts using a second loop and pagination. These posts change with pagination.

I am looking to get a few advanced features though and was wondering if anyone can help.

1. I am looking for an option that says something similar to “Results per page:” and then allows the user to select from a dropdown to change how many posts are shown.

2. if there is a way I can get it to display something like “1-10 out of total posts and then update with the pagination.

If these things are possible I’d love to know how.

My code is

<main id="main" class="site-main">
    <h1 class="page-title screen-reader-text"><?php single_post_title(); ?></h1>
    <div class="recent">
        <div>
        <?php
        $args = array(
            'posts_per_page' => '1',
            'ignore_sticky_posts' => true
        );
        $query = new WP_query ( $args );
        if ( $query->have_posts() ) : 
		//if ( have_posts() ) :
            /* Start the Loop */
            while ( $query->have_posts() ) : $query->the_post();
			//while ( have_posts() ) :
                //the_post();
                
                get_template_part( 'template-parts/content', get_post_type() );
			endwhile;
            rewind_posts();
            // the_posts_navigation();
            
		else :

			get_template_part( 'template-parts/content', 'none' );

		endif;
        ?>
        </div>
        <div>
        <h3>Popular Posts</h3>
</div>
        </div>
<div class="posts">
        <?php while ( have_posts() ) : the_post(); ?>
 
<?php get_template_part( 'template-parts/content', get_post_type() ); ?>
    
<?php // End the loop.
endwhile; ?>

</main><!-- #main -->
<?php custom_pagination(); ?>
<?php
get_sidebar();
get_footer();