-
-
Notifications
You must be signed in to change notification settings - Fork 28
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] New Slider components and hook #373
base: master
Are you sure you want to change the base?
Conversation
dd496d9
to
366c478
Compare
This comment was marked as resolved.
This comment was marked as resolved.
366c478
to
b1707f7
Compare
This comment was marked as resolved.
This comment was marked as resolved.
Ah ok. Yeah that issue seems to be resolved. This might be unrelated, but when I click the track, the thumb isn't centered with the pointer. The thumb is shifted slightly to the right of center. I'm guessing this issue is because the thumb is 20px but the |
@mj12albert I pushed a commit to update the CSS to be simpler, fix a few bugs, and not rely on Additional notes:
|
From a quick play I found a few issues: Slider:
Gradient demo:
|
This is because the
I'm not seeing this in Chrome on Mac. Video attached. Which browser/platform are you using? Screen.Recording.2024-05-08.at.23.43.26.mov |
Sorry, there were no existing comments when I wrote mine, and only just submitted it without first refreshing the page.
Looks like it was since fixed in ebdb65b. Here's a new one. Vertical thumb alignment is broken in Chrome on Mac: |
I will fix this - I think it's a side effect of fixing the thumb shift!
@colmtuite Without changing the structure for now, I've updated it so the input is blurred on the Thumb's
@mbrookes Fixed ~ it was just a stray css property in the demo!
Will continue debugging this - I know the customizations in this demo created a lot of weird issues with the keyboard behavior 😅 |
@mj12albert Why did you do this? It's a major a11y flaw now. |
Just wanted to make a quick fix to the demo... I have reverted it |
Ok. Yeah when you click anywhere on the Slider, it should become focused. That's just how it works. Same if you tab to the Slider. I understood that comment to be referring to the focus style, which we could hide if we could use |
b4723a8
to
1c97949
Compare
Netlify deploy preview |
ee06377
to
70af66c
Compare
7078115
to
6283c3b
Compare
revert lockfile
da37c64
to
d604d66
Compare
d604d66
to
f1cce78
Compare
Closes #216
Closes #76
Closes #77
Major changes
valueLabel
slot/component, and related featuresrail
slot/component previously referred to the full length of the slider. This is now renamed to instead be thetrack
track
component referred to the filled portion of the slider "bar". This component is dropped, but can be easily implemented using a newuseSliderContext
hookinput
element anymore, it's automatically wired to the corresponding thumb (aspan
by default), and allows for styling the thumb directly with:focus-visible
Mark
component/slot, and themarks
prop will be dropped. Thestep
prop defaults to1
and can no longer benull
. (TODO open a new issue to redesign marks support)Summary
render
prop for the Thumb component may be a special case, as it contains a "hidden" inputinput
- it's kept as a child of the thumb (for now) because we could solve [Slider] Issues with adding focus-visible styles to the thumb slot #77 without actually having to move the inputDemos
<label>
&aria-labelledby
: https://deploy-preview-373--base-ui.netlify.app/experiments/slider-label/