[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]

@imicadio 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 Here's a CodeSandbox 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