[Help]: How to build an Embla Carousel Scrollbar

[imicadio]

Summary

hi :)

@davidjerleke your library is very good. I love this 😄

I have "embla-carousel-react": "8.3.0" and I decided to make a scroll (scrollbar)

The scrollbar works quite nicely but I have a problem... or rather, my slider does not integrate with the arrows and the rest of the carousel if I move the slider:

https://codesandbox.io/p/sandbox/embla-carousel-progress-react-forked-nqjjkt?workspaceId=d23f754a-ab87-4f51-b08d-bf0606a5023a

I suppose that this piece of code is responsible for the potential errors and bugs that have occurred with me:
File: src\js\CarouselScrollbar\CarouselScrollbar.tsx
line of code: 77

engine.animation.stop() 
engine.translate.to(rangeValueForEmblaEngine) 
engine.location.set(rangeValueForEmblaEngine) 
engine.index.set(closestIndex) 

Can I ask for help in solving the problem?

2024-10-14_13h53_09.mp4

If applicable, which variants of Embla Carousel are relevant to this question?

• embla-carousel (Core)
• embla-carousel-react
• embla-carousel-vue
• embla-carousel-svelte
• embla-carousel-autoplay
• embla-carousel-auto-scroll
• embla-carousel-solid
• embla-carousel-auto-height
• embla-carousel-class-names
• embla-carousel-fade
• embla-carousel-docs (Documentation)
• embla-carousel-docs (Generator)

Additional information

No response

CodeSandbox example

https://codesandbox.io/p/sandbox/embla-carousel-progress-react-forked-nqjjkt?workspaceId=d23f754a-ab87-4f51-b08d-bf0606a5023a

[TmLev]

Also interested in a custom scrollbar.

I took a look at your CodeSandbox example and it feels like there’s a state de-sync somewhere – the prev/next buttons aren’t picking up changes made via the scrollbar.
Can we assume that the Embla engine itself has the correct internal state, since the slides are scrolling exactly as requested by the scrollbar?

[davidjerleke]

@TmLev yes, Embla has the correct state. You need to work with the internalEngine method and calculate the position using the limit property. Maybe I will have time to look into this after I’m done with v9.

[davidjerleke]

@imicadio @TmLev The CodeSandbox below is demonstrating the use of an <input type="range"> as a scroll bar. This setup is just for illustrative purposes — feel free to swap in any input element that suits your needs. The core functionality lies in the scrollToProgress function, which handles the scroll logic.

• CodeSandbox demo
• CodeSandbox code

[TmLev]

This is awesome – thank you so much for the demo and the code! Do you think it makes sense to add this to Embla as a plugin or as an example in the docs?

[davidjerleke]

Thanks for the suggestions, @TmLev! I’m glad you found the demo helpful. I’m not sure what would be best here — turning it into a plugin would require us to make assumptions about the scrollbar input, which isn’t ideal since different use cases might involve very different input elements or behavior.

It might make more sense to include it as an example in the docs instead, since the scrollToProgress function is pretty minimal and easy to adapt.

[davidjerleke]

• Created issue [Feat]: Add custom scrollbar example to documentation #1218 and added it to the roadmap:
• [Feat]: ⭐ Roadmap #841.