[Slider] marks texts are out of bounds when labels are too long
See original GitHub issueDuplicates
- I have searched the existing issues
Latest version
- I have tested the latest version
Current behavior 😯
If your marks text is too big then it’s going to move out of it’s parent’s element bounds.
The same applies to tooltips
Expected behavior 🤔
I’d suggest adding a new option to slider which would prevent overflow. Not sure if MUI is still using Popper.js, but they have this feature built-in https://popper.js.org/docs/v2/modifiers/prevent-overflow/
Steps to reproduce 🕹
Just create any slider inside of Paper and add mark with long label in props.
Context 🔦
No response
Your environment 🌎
`npx @mui/envinfo`
Browser is Chrome 100
System:
OS: Linux 5.4 Ubuntu 20.04.4 LTS (Focal Fossa)
Binaries:
Node: 16.13.1 - ~/.asdf/installs/nodejs/16.13.1/bin/node
Yarn: Not Found
npm: 8.1.2 - ~/.asdf/plugins/nodejs/shims/npm
Browsers:
Chrome: Not Found
Firefox: Not Found
npmPackages:
@emotion/react: ^11.9.0 => 11.9.0
@emotion/styled: ^11.8.1 => 11.8.1
@mui/base: 5.0.0-alpha.76
@mui/icons-material: ^5.6.1 => 5.6.1
@mui/lab: ^5.0.0-alpha.77 => 5.0.0-alpha.77
@mui/material: ^5.6.1 => 5.6.1
@mui/private-theming: 5.6.1
@mui/styled-engine: 5.6.1
@mui/system: 5.6.1
@mui/types: 7.1.3
@mui/utils: 5.6.1
@mui/x-date-pickers: ^5.0.0-alpha.0 => 5.0.0-alpha.0
@types/react: ^17.0.44 => 17.0.44
react: ^17.0.2 => 17.0.2
react-dom: ^17.0.2 => 17.0.2
typescript: ^4.6.3 => 4.6.3
Issue Analytics
- State:
- Created a year ago
- Reactions:1
- Comments:5 (5 by maintainers)
Top Results From Across the Web
sliderInput Max/Min Text Labels - Stack Overflow
I am currently working on a dashboard with multiple sliderInputs. Is it possible to replace the max and min labels with ...
Read more >Horizontal slider but vertical marks or label of the marks
I am using a slider but sometimes there are too many marks and the name of marks just smush in to each other....
Read more >Sliders - Selection and input - Human Interface Guidelines
A slider is a horizontal track with a control, called a thumb, that people can adjust between a minimum and maximum value.
Read more >React Slider component - Material UI - MUI
Sliders allow users to make selections from a range of values. ... <Slider aria-label="Custom marks" defaultValue={20} getAriaValueText={valuetext} ...
Read more ><input type="range"> - HTML: HyperText Markup Language
You can label hash marks by giving the <option> elements label attributes. However, you must use CSS to show the labels and to...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Yes, sorry, I meant Slider.
I was also thinking about simply shorting the number but sometimes I just don’t know how big this number would be and how
Intl
API would display the multiplier value.For anyone who’s going to work on this I suggest you take Ion.RangeSlider’s behavior as a reference. You can see that it keeps edge mark texts in bounds when centering it under the mark is not possible.
I assume you meant
Slider
, notCheckbox
. In cases like this, I would assume the parent component should basically grow as the content (or be wider in order to have place for the marks). But if there is someone from the community willing to dive into this enhancement, it would be great.