[Help]: Set scroll position in %

[rd-xx]

Summary

Hi. I'm trying to create a slider which updates the scroll position of the carousel in % but didn't find anything to get this done in the current version (8.6.0).

I found an example that more or less shows what I'm trying to achieve, however, it's only for showing the scroll position (https://www.embla-carousel.com/examples/predefined/#progress. What I want is have that slider be clickable so it updates the scroll position.

I tried using emblaApi.scrollTo() (which requires the slide index), but as it sets the scroll position to the start of the slide, the slider it not set where the user clicked. It either stops a little before, or after.

CleanShot.2025-04-09.at.16.31.44.mp4

  const handleScrollProgress = useCallback(
    (v: number[]) => {
      if (!emblaApi) return

      const slideCount = emblaApi.slideNodes().length
      const slideIndex = Math.floor((v[0]! / 100) * (slideCount - 1))

      emblaApi.scrollTo(slideIndex)
    },
    [emblaApi],
  )

I came across #23 and #26 but none of them where of help. I think the methods mentioned there are from older versions of the library, that didn't made the newer versions. Maybe because there's a new way of doing this that I'm not aware of?

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

Using version 8.6.0

CodeSandbox example

No response

[davidjerleke]

Hi @rd-xx,

Thanks for your question. I just want to clarify—are you looking to use percentages % instead of pixels px for the carousel container's animation? Just want to make sure I understand what you're aiming for.

[rd-xx]

Hi David, yes that's it.

Maybe it wasn't clear enough and I apologize for that. If you watch the little video I made, you'll see that when I click on the slider, the white bar (which I get from emblaApi.scrollProgess()) either stops a little before, or after where I clicked.
The reason for that is because I use scrollTo(slideIndex).

Ultimately, what I want if for the bar to stop exactly where I clicked on the slider, and I think that would be the case if I could set the scroll progress in % instead of the slide index.

If you think this is not the right approach, please let me know. Thank you :)

[davidjerleke]

@rd-xx so just to confirm—depending on where you click on that bar, you want the carousel to scroll to the corresponding percentage position?

[rd-xx]

Yes, exactly.

[davidjerleke]

@rd-xx, you can use the internalEngine to scroll programmatically:

emblaApi.internalEngine().scrollTo.distance(
  10, // Pixels to scroll from the current position
  false // `snap` parameter. Set to `false` to scroll freely without snapping
);

Keep in mind that this function works in pixels, so if you have a percentage-based scroll position (from the clickable bar), you’ll need to convert that into pixels. You can use the limit properties to help with this conversion:

emblaApi.internalEngine().limit.max   // The maximum scrollable position of the track
emblaApi.internalEngine().limit.min   // The minimum scrollable position of the track
emblaApi.internalEngine().limit.length // The total scrollable length of the track

Here's how to read the current position of the carousel:

const currentLocation = emblaApi.internalEngine().offsetLocation.get()

And here's how to read the current target where the carousel is headed:

const target = emblaApi.internalEngine().target.get()

Important note:
For a left-to-right (ltr) and horizontal carousel setup, the limit.min represents the left-most end of the carousel. This is because the container scrolls left to progress, meaning it uses negative translation on the x-axis to move the carousel.