-
-
Notifications
You must be signed in to change notification settings - Fork 32.4k
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
[docs] Create SliderUnstyled docs #31850
Conversation
|
||
<p class="description">Sliders allow users to make selections from a range of values.</p> | ||
|
||
Sliders show a range of values along a bar, from which users may select a single value. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sliders show a range of values along a bar, from which users may select a single value. | |
Sliders show a range of values along a bar, from which users may select a single value, or a range. |
Not sure how to phrase that users can select a range too, for example from the sliders with two thumbs.
import { styled, alpha, Box } from '@mui/system'; | ||
import SliderUnstyled from '@mui/base/SliderUnstyled'; | ||
|
||
const StyledSlider = styled(SliderUnstyled)( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
- Each thumb has a user-friendly label (`aria-label`, `aria-labelledby` or `getAriaLabel` prop). | ||
- Each thumb has a user-friendly text for its current value. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
What does "thumb" refer to here? I don't see this word used anywhere else in the document. Is this the accepted term for the control itself?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good point - we haven't introduced this term before. It may be worth having an image explaining the anatomy of a slider, similar to https://material.io/components/sliders#anatomy. Other controls would benefit from it too.
@danilo-leal, would you agree?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Absolutely. Similar to the customization examples, I reckon we could add these in bulk in a separate PR once the first iteration of each component docs is done!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks good, I would recommend in the next pass to change a bit the look of the focus visible and selected styles of the thumbs, as they look a lot like Material Design :)
Moved the SliderUnstyled docs to Base and created more unstyled demos based on the Material UI ones.
Preview: http://deploy-preview-31850--material-ui.netlify.app/base/react-slider