Splide: Making progress bar clickable/draggable

[HolyMolyCS]

Hi community,

I've added the Splide slider to a website and have a progress bar with it. I'm struggling, however, to make the progress bar clickable/draggable.

I see on the Splide site that it can be done if you "Compute a target index by a clicked position + Move the slider by Splide#go()" but I'm struggling to figure out how this is done.

This is the current code I have used

<script>
 
  var splide = new Splide( '.splide' );
  var bar    = splide.root.querySelector( '.my-slider-progress-bar' );
  
  // Update the bar width:
  splide.on( 'mounted move', function () {
    var end = splide.Components.Controller.getEnd() + 1;
    bar.style.width = String( 100 * ( splide.index + 1 ) / end ) + '%';
  } );
  
  splide.mount();
  
</script>

Thanks for any help!

[NaotoshiFujita]

Just calculate the index by client positions of the mouse and the bar element.
https://stackoverflow.com/questions/3234256/find-mouse-position-relative-to-element

[HolyMolyCS]

Hey @NaotoshiFujita :) Thanks so much for the reply!

Not sure I'm following though - I'm a newbie to javascript so still finding my feet. Below is the updated code and I've added the id #progress to the progress bar but nothing seems to be happening. Does the code below look correct?

<script src="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/js/splide.min.js"></script>

<script>
 
  var splide = new Splide( '.splide' );
  var bar    = splide.root.querySelector( '.my-slider-progress-bar' );
  
  // Update the bar width:
  splide.on( 'mounted move', function () {
    var end = splide.Components.Controller.getEnd() + 1;
    bar.style.width = String( 100 * ( splide.index + 1 ) / end ) + '%';
  } );
  
  document.getElementById('progress').onclick = function clickEvent(e) {
      // e = Mouse click event.
      var rect = e.target.getBoundingClientRect();
      var x = e.clientX - rect.left; //x position within the element.
      var y = e.clientY - rect.top;  //y position within the element.
      console.log("Left? : " + x + " ; Top? : " + y + ".");
    } );
  
  splide.mount();
  
</script>

[NaotoshiFujita]

Before writing code, you should make your algorithm. To do that, you have to learn the basis of JavaScript...

[HolyMolyCS]

Hmm okay, back to the drawing board then.

[HolyMolyCS]

@NaotoshiFujita - do you perhaps have an example of a clickable progress bar that I can look at and better understand?

I of course want to learn JavaScript but time is of the essence and I'd like to have a solution for this otherwise I'll look into other slider alternatives for the time being.

Thanks!