Splidejs or jQuery / JS and changing slides with range slider

Question

I made slider with SplideJS with thumbnails and arrows, working simply, click on arrow changing slide, slick on thumbnail changing slide, simple as that.

My problem is that I would like to insert range slider with 8 steps that when you move range slider thumbnails are moving, but when thumbs are in autoloop range slider isn't moving.

Unfortunately SplideJS doesn't support range slider, so I thought to use jQuery (below), but I'm completely lost how to get it done.

HTML + SplideJS:

https://splidejs.com/thumbnail-slider/

<div id="secondary-slider" class="splide">
    <div class="splide__track">
        <ul class="splide__list" id="toRangeSlider">
            <li class="splide__slide">1st slide</li>
            <li class="splide__slide">2nd slide</li>
            <li class="splide__slide">3rd slide</li>
            <li class="splide__slide">4th slide</li>
            <li class="splide__slide">5th slide</li>
            <li class="splide__slide">6th slide</li>
            <li class="splide__slide">7th slide</li>
            <li class="splide__slide">8th slide</li>
        </ul>   
    </div>
</div>

jQuery

https://jqueryui.com/slider/#default

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
  $( function() {
    var select = $( "#toRangeSlider" );
    var slider = $( "<div id='slider'></div>" ).insertAfter( select ).slider({
      min: 1,
      max: 8,
      range: "min",
      value: select[ 0 ].selectedIndex + 1,
      slide: function( event, ui ) {
        select[ 0 ].selectedIndex = ui.value - 1;
      }
    });
    $( "#toRangeSlider" ).on( "change", function() {
      slider.slider( "value", this.selectedIndex + 1 );
    });
  } );
</script>

Answer 1

I wasn't sure about the code you posted, so I made my own. On document.load it dynamically sets the range-slider to have a max of the count of slides. The listener is input rather than change since you want immediate results, and the api to programmatically switch slides is splider.go(+$(this).val()) (the + converts the string val() into a number). I noticed that the API had trouble keeping up with the slider so I put in a little setTimeout that gives it a chance to catch up.

$(document).ready(function() {
  let tmo; // track the timeouts
  $("#range-slider").attr('max', $('.splide__slide').length - 1);
  $("#range-slider").on("input", function() {
    clearTimeout(tmo);
    tmo = setTimeout(() => splider.go(+$(this).val()), 100)
  });
  const splider = new Splide('.splide').mount();
});

.splide__slide {
  padding: 20px;
  text-align: center;
}

.slider {
  display: block;
  width: 80%;
  margin: 15px auto;
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/js/splide.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/css/splide.min.css">
<div id="secondary-slider" class="splide">
  <div class="splide__track">
    <ul class="splide__list" id="toRangeSlider">
      <li class="splide__slide">1st slide</li>
      <li class="splide__slide">2nd slide</li>
      <li class="splide__slide">3rd slide</li>
      <li class="splide__slide">4th slide</li>
      <li class="splide__slide">5th slide</li>
      <li class="splide__slide">6th slide</li>
      <li class="splide__slide">7th slide</li>
      <li class="splide__slide">8th slide</li>
    </ul>
  </div>
</div>
<input type="range" step="1" min="0" max="" value="0" class="slider" id="range-slider">