Stop thumb from overflowing track

[FrancoTanzarella]

I would like to constrain the thumb from overflowing the track left and right edge. Currently it will scroll half it's own width past each edge. Is there a way to limit it and keep it inside the track?

Here is an example of what I have currently. https://codesandbox.io/s/xenodochial-babycat-vmhhl?file=/src/App.js

[shivamragnar]

Hey @FrancoTanzarella were you able to get this ?

[FrancoTanzarella]

No I ended up not using this package and used my own implementation which wasn't great but it did what I needed it to do.

[gonzalezi2]

I had the same issue but I resolved it by using a container div that has padding on it and then used the container to have a background instead of the track element.

Example:

renderTrack={({ props: trackProps, children }) => (
    <div style="padding: 0 6px; background-color: blue">
        <Track  {...trackProps}>{children}</Track>
    </div>
)}