RangeSlider Can't Render Translucent outOfRangeBarColor

[avanavana]

Edit: I realized after later analysis that the problem is that this package doesn't support a translucent color for the outOfRangeBarColor prop, because it layers the extremities of the out-of-range bars over a full-width inner bar, but for two nubs half the width of the knob size on either side. I am just going to solve this by choosing a solid color that mimics the translucent color over my background, but you might consider scaling both the size of the inner and outer portions of the bar instead of just the outers and layering them, in order to support translucent colors.

My app has an onboarding process that utilizes a pages horizontal ScrollView to walk new users through creating their profile, step by step.

I have used this RangeSlider component elsewhere in the app, successfully, within a bottom sheet.

However, when I added it to a page in my onboarding flow, the rendering broke. I recall from the first time I used it that a similar thing occurred, and I was able to fix it by providing a fixed width to the RangeSlider container, instead of a percentage width.

However, in this case, this doesn't fix the issue. I believe the problem is that the RangeSlider is somehow computing its size on mount based on the ultimate ancestor component, which, since this is part of a horizontal ScrollView is the width of the entire ScrollView, rather than the width of the actual screen.

Please let me know if you have a fix or a workaround for this! I like this package, but I will unfortunately be forced to use another or sink a bunch of extra time in order make my own, if I can't solve this issue.

Screenshot: (Note: the minimum and maximum are 0 and 99, respectively, and the knobs should be at 19 and 29, respectively, with a white inRangeBarColor between them, and a translucent white outOfRangeBarColor on either side, with rounded edges, however, you can see that the rendering is quite broken instead)

[avanavana]

After looking through your code and inspecting the layout events, I actually determined that the aforementioned is not the cause of the layout bug. It's much simpler.

Your library doesn't support translucent colors for the outOfRangeBarColor, because it gets layered over the inRangeBarColor, which is just applied to a static 100% width bar below, thus giving the effect seen above, with half of the knob size sticking out of either side visible.

You could fix this by animating both the inner bar and outer bar when the knobs are dragged, instead of just the outer bars.

For now, since i am in a severe time crunch, I'm just going to set it to a solid color.