[v12] feat(ui-range-input): rework RangeInput

[ToMESSKa]

INSTUI-4805

ISSUE:

• RangeInput needs to be migarted to the new theming system

TEST PLAN:

• compare the component to the Figma design https://www.figma.com/design/5WFqF3HVlNdfcJooCaiFoh/InstUI-Component-Library?node-id=11527-5370&p=f&m=dev
• check if all tokens are used in styles.ts
• check if the component works the same as before
• check if focus rings in the handler work as they supposed to

[github-actions]

PR Preview Action v1.8.1
Preview removed because the pull request was closed.
2026-01-21 10:45 UTC

[adamlobler]

On the original component the padding around the value tooltip was only a horizontal padding, now its a full padding, we should revert this to the original one:

Other than that, it looks okay. There’s just one more small thing, but we should update the tokens as well since we don’t have a proper solution right now... The focus ring isn’t visible in the dark theme, and we don’t currently have a focus color that fits here. I’ll update the tokens and get back to you with a solution:

[ToMESSKa]

On the original component the padding around the value tooltip was only a horizontal padding, now its a full padding, we should revert this to the original one:

Other than that, it looks okay. There’s just one more small thing, but we should update the tokens as well since we don’t have a proper solution right now... The focus ring isn’t visible in the dark theme, and we don’t currently have a focus color that fits here. I’ll update the tokens and get back to you with a solution:

@adamlobler Now the padding token only applies the horizontal padding, I set the vertical padding to 0. Also the focus ring should be okay now, can you check it please?

[adamlobler]

The paddings and the focusBorder looks okay, thanks for the modification👌 We just need to make some smaller modifications on the token values but its not on your side.

joyenjoyer finished the review instead of balzss