Is there an alternative to scrollToProgress()?

[EntropyReversed]

Currently working on project that has a slider that should be moved with input. I can get progress with scrollProgress() and if I plug it into input value input is updated on Embla scroll, how can I invert it so that Embla is updated with input? scrollToProgress() and scrollBy() were good for this use case but they were deprecated in v3.0.0. Are there any alternatives?

[davidjerleke]

Hi @EntropyReversed,

Thank you for your question. It seems like you removed the following part when you created your feature request:

It's important to not remove this, because I don't know if I should demonstrate how to achieve what you want with VanillaJs or ReactJs. I'm going to show you how to achieve what you want with VanillaJs, and if you're using ReactJs you'll have to refactor my code into the "React way" of doing it.

Take a look at this CodeSandbox.

Let me know if it helps.

Best,
David

[EntropyReversed]

Hi @davidcetinkaya!
It is vanilla js-related and this is exactly what I've been looking for!
Thank you very much

[davidjerleke]

Glad to hear that @EntropyReversed. Try it out and let me know if it's working as intended.

Best,
David

[EntropyReversed]

Have one question. What is n in withinBounds()?

[davidjerleke]

@EntropyReversed, it should be return distance, not return n. Sorry about that. I’ve updated the code snippet.

[EntropyReversed]

When I call scrollToProgress(-0.5) on the load it scrolls to the middle (as it should), but when I call it from inputs eventListener and I pass its values (that range from 0 to -1) it doesn't work. It goes from start to end by the time input is about 20% scrolled

input.addEventListener('input', () => {
   let inputValue = input.value / 100;
   scrollToProgress(-inputValue);
   console.log(-inputValue) // this returns numbers from 0 to -1;
})

[davidjerleke]

@EntropyReversed I’m not sure why you’re passing a negative number to scrollToProgress? It was some time ago I created these methods but if I’m not mistaken you should pass a positive number from 0 to 1.

This is because scrollToProgress takes an absolute scroll destination. Passing 0.2 will always scroll to the position where the carousel has scrolled 20% of its scrollable length. So a negative value should not be passed to it.

On a side note
I added syntax highlighting to your code snippet. I hope that's ok.

[EntropyReversed]

@davidcetinkaya I tried to pass only values from 0 to 1 to scrollToProgress but it doesn't work here is a codesandbox link. Maybe I'm doing something wrong?

[davidjerleke]

Hi again @EntropyReversed,

I must have rushed it when copy pasting the code snippet. I've created a working CodeSandbox for you now. I took the liberty to sync the input when the user scrolls the carousel directly by dragging or clicking the previous and next buttons too. If you don't need it you can just remove that code.

Sorry for the inconvenience and let me know if it's working as intended now.

Best,
David

[EntropyReversed]

Hey @davidcetinkaya, it works. And it is more than I asked for but it's everything that I need (i didn't want to bother you with syncing the input when the user scrolls the carousel, was planning to do it myself). So thank you very much and I really appreciate what you did! Btw, love Embla Carousel!

[davidjerleke]

Thanks @EntropyReversed, I’m glad to hear that. Closing this issue as resolved then.

Enjoy!
David