Taxonomy Slider with Lightbox and Timeline Range Slider

Shortcode

function dtwd_special_show_timeline($atts){
   ob_start(); 
   $taxonomies_times = get_terms( array(
     'taxonomy' => 'community-type',
     'hide_empty' => false,
     'meta_key'			=> 'year',
  'orderby'			=> 'meta_value',
  'order'				=> 'DESC'
 ) );
 if ( !empty($taxonomies_times) ) :?>
   <div class="timeline_slide">
  <div class="milestone-carousel owl-carousel">
   <?php $years = array();
    foreach( $taxonomies_times as $taxonomies_time ) {
    $successful_community = get_field('successful_community', $taxonomies_time->taxonomy . '_' . $taxonomies_time->term_id);
    if($successful_community==true){
      $address = get_field('address', $taxonomies_time->taxonomy . '_' . $taxonomies_time->term_id);
     $link = get_field('page_link', $taxonomies_time->taxonomy . '_' . $taxonomies_time->term_id);
     $year = get_field('year', $taxonomies_time->taxonomy . '_' . $taxonomies_time->term_id);
     $years[] = $year;?>
    <div class="milestone" data-year="<?php echo $year;?>">
     <?php if( have_rows('gallery', $taxonomies_time->taxonomy . '_' . $taxonomies_time->term_id) ): ?>
       <div class="swiper-container timeline_small">
        <div class="swiper-wrapper">
       <?php while( have_rows('gallery', $taxonomies_time->taxonomy . '_' . $taxonomies_time->term_id) ): the_row(); 
           $image = get_sub_field('image', $taxonomies_time->taxonomy . '_' . $taxonomies_time->term_id);
           ?>
           <div class="swiper-slide">
              <a href="<?php echo $image; ?>" data-lightbox="time_<?php echo $taxonomies_time->term_id;?>"> <img src="<?php echo $image; ?>" alt="" class="img_slide"></a>
              <span class="year_place"><?php echo $year;?></span>
           </div>
        <?php endwhile; ?>
        </div>
          <!-- If we need navigation buttons -->
       <div class="swiper-button-prev"></div>
       <div class="swiper-button-next"></div>
       </div>
   <?php endif; ?>
    <div class="data_info">
     <h3><?php echo $taxonomies_time->name;?></h3>
        <p><?php echo $address;?></p>
    </div>
    </div>
  <?php } }?>
  </div>
   </div>
   <div class="range_slider">
     <!-- <div class="years-carousel owls-carousel">
        <?php
         $first = reset($years);
       $last = end($years);
       $total_year = count($years);
       $diff = $first - $last;
       $steps =  $diff % $total_year;
         foreach( $years as $dyears ) {?>
      <!-- <div class="years"><a href="#<?php echo $dyears;?>"><?php echo $dyears;?></a></div>   -->
   <?php }?>
  <!-- </div> --> 
  <?php echo $first;?><input type="range" min="2008" max='<?php echo $first;?>' value="<?php echo $first;?>" step="<?php echo $steps*3;?>" id="reversedRange" current_year = "<?php echo $first;?>" latest_year="<?php echo $first;?>"><?php echo $last;?>
   </div>
<?php endif;?>
   <style>
     .timeline_small {
      width: 350px;
      height: 250px;
  }
  #reversedRange {
    direction: rtl
  }
   </style>
   <script>
jQuery( document ).ready(function($) {
  const swiper = new Swiper('.timeline_small', {
   //direction: 'vertical',
   loop: true,
   // Navigation arrows
   navigation: {
     nextEl: '.swiper-button-next',
     prevEl: '.swiper-button-prev',
   },
 });
 jQuery(function() {
 var oldVal;
 var owl = jQuery('.milestone-carousel');
 owl.owlCarousel({
  loop:false,
     margin:10,
     nav:false,
     responsive:{
         0:{
             items:1
         },
         600:{
             items:3
         },
         1000:{
             items:3
         }
     }
 });
  // jQuery("#rangeValue").text(jQuery("#reversedRange").val());
   var oldVal = jQuery("#reversedRange").attr('current_year', jQuery("#reversedRange").val());
   jQuery("#reversedRange").attr('current_year', jQuery("#reversedRange").val());
   jQuery("#reversedRange").on('change input', function() {
     jQuery("#reversedRange").attr('current_year', jQuery("#reversedRange").attr('latest_year'));
     jQuery("#reversedRange").attr('latest_year', jQuery(this).val());
     console.log(jQuery(this).val());
      var newVal = jQuery(this).val();
         if(newVal > oldVal) {
             console.log("left");
             owl.trigger('prev.owl.carousel', [300]);
         }
         else if(newVal < oldVal) {
             console.log("right");
             owl.trigger('next.owl.carousel');
         }
     oldVal = newVal;
   });
 });
});
    </script>
   <?php $specialsearch = ob_get_clean();
return $specialsearch;
}
add_shortcode('show_timeline', 'dtwd_special_show_timeline');

Include this files

function custom_scripts_styles() {
 global $wp_styles;
 /**
  * OwlCarousel Library
  */
 wp_enqueue_script( 'owl.carousel', get_stylesheet_directory_uri() . '/inc/owl.carousel.min.js', array( 'jquery' ), '20160115', true );
 wp_enqueue_style( 'owl.carousel', get_stylesheet_directory_uri() . '/inc/owl.carousel.min.css' );
 wp_enqueue_style( 'owl.carousel.theme', get_stylesheet_directory_uri() . '/inc/owl.theme.default.css' );
 wp_enqueue_script( 'lightbox.carousel', 'https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js', array( 'jquery' ), '20160115', true );
 wp_enqueue_style( 'lightbox.theme','https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css' );
    }
add_action( 'wp_enqueue_scripts', 'custom_scripts_styles' );