Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Slider] Fix thumb positioning #1411

Merged
merged 7 commits into from
Feb 5, 2025

Conversation

mj12albert
Copy link
Member

@mj12albert mj12albert commented Feb 4, 2025

Fixes #1360
Fixes #1406

Demo: https://stackblitz.com/edit/vitejs-vite-zsatgbgk?file=src%2FApp.tsx

The demo shows both fixes:

  • when setting the value with the NumberField, the corresponding slider should reposition correctly

  • when dragging a thumb to match the same value set by a NumberField (of an adjacent row) the thumbs should line up exactly and have the same CSS width value

  • I have followed (at least) the PR section of the contributing guide.

@mj12albert mj12albert added the component: slider This is the name of the generic UI component, not the React module! label Feb 4, 2025
Copy link

netlify bot commented Feb 4, 2025

Deploy Preview for base-ui ready!

Name Link
🔨 Latest commit 084f6bf
🔍 Latest deploy log https://app.netlify.com/sites/base-ui/deploys/67a3413252dcb20008e0cb86
😎 Deploy Preview https://deploy-preview-1411--base-ui.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@mj12albert mj12albert force-pushed the fix/slider-thumb-positioning branch 3 times, most recently from 3d84498 to 9b9e937 Compare February 4, 2025 11:54
@mj12albert mj12albert changed the title fix/slider-thumb-positioning [Slider] Fix thumb positioning Feb 4, 2025
@mj12albert mj12albert added the bug 🐛 Something doesn't work label Feb 4, 2025
@mj12albert mj12albert force-pushed the fix/slider-thumb-positioning branch from 9b9e937 to 1ac42ee Compare February 4, 2025 14:16
@mj12albert mj12albert force-pushed the fix/slider-thumb-positioning branch from 5ccd245 to c419c5e Compare February 4, 2025 14:43
@mj12albert mj12albert marked this pull request as ready for review February 4, 2025 15:02
event: React.KeyboardEvent | React.ChangeEvent,
) => void;
/**
* Callback fired when drag ends and invokes onValueCommitted.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: it's really up to the consumer to decide when this function is really called (as useSliderRoot doesn't call it itself as far as I can see). IMO a better description would be "Function to be called when drag ends. Invokes onValueCommitted"

Copy link
Member

@michaldudak michaldudak left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice, bugs seem to be fixed. I have a minor remark, but it's good to go anyway.

@mj12albert mj12albert merged commit 79b7604 into mui:master Feb 5, 2025
22 checks passed
@mj12albert mj12albert deleted the fix/slider-thumb-positioning branch February 5, 2025 11:04
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work component: slider This is the name of the generic UI component, not the React module!
Projects
None yet
2 participants