Skip to content

fix(fuselage): correct Slider track fill for non-zero minValue and RTL locales - #2169

Open
aniruddhaadak80 wants to merge 3 commits into
RocketChat:mainfrom
aniruddhaadak80:fix/slider-track-fill-rtl-minvalue
Open

fix(fuselage): correct Slider track fill for non-zero minValue and RTL locales#2169
aniruddhaadak80 wants to merge 3 commits into
RocketChat:mainfrom
aniruddhaadak80:fix/slider-track-fill-rtl-minvalue

Conversation

@aniruddhaadak80

Copy link
Copy Markdown

Original commits

Fixes the Slider track fill rendering in two scenarios where it did not match the actual thumb position:

1. Non-zero minValue produced a wrong fill position

getThumbPosition computed (value / (maxValue - minValue)) * 100, which ignores the offset of minValue. For example, a slider with minValue={50} maxValue={150} and value 100 rendered its fill at 100% instead of 50%.

The component now uses react-stately's own percent calculation (state.getThumbPercent(index)), which also fixes multi-thumb sliders where each thumb can have a different range (previously both thumbs shared getThumbMaxValue(1) || getThumbMaxValue(0)).

2. Horizontal fill ignored RTL direction

react-aria flips horizontal slider geometry in RTL locales, but the track gradient was hardcoded to to right, so in RTL languages the filled portion appeared on the wrong side of the thumb. The gradient direction now follows useLocale().direction.

Evidence that the new tests catch the original bugs

Running the updated spec against the old SliderTrack.tsx:

x should position the track fill relative to minValue
x should mirror the track fill direction in RTL locales
x should keep the multi-thumb band ordered in RTL locales
Tests:       3 failed, 5 passed, 8 total

With the fixed SliderTrack.tsx:

PASS packages/fuselage/src/components/Slider/Slider.spec.tsx
Tests:       8 passed, 8 total

The vertical slider path is intentionally untouched: to top + percent-from-min was already correct for vertical orientation.

@rocket.chat/fuselage patch changeset included.

@changeset-bot

changeset-bot Bot commented Aug 23, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: b12ad2e

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@rocket.chat/fuselage Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@CLAassistant

CLAassistant commented Aug 23, 2026

Copy link
Copy Markdown

CLA assistant check
All committers have signed the CLA.

@CLAassistant

Copy link
Copy Markdown

CLA assistant check
Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
You have signed the CLA already but the status is still pending? Let us recheck it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants