material-ui: [Slider] marks texts are out of bounds when labels are too long

Duplicates

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

About this issue

Original URL
State: open
Created 2 years ago
Reactions: 4
Comments: 17 (12 by maintainers)

Most upvoted comments

This won’t solve the issue for all users, but figured I’d share what I ended up doing to address my specific use-case.

Original slider:

I updated CSS of labels to be:

// Left-most label
transform: translateX(0); 

// Right-most label 
transform: translateX(-100%);

dehli on Oct 19, 2023

@ZeeshanTamboli I think this issue should be reopened. In the linked PR it’s mentioned that this should be controlled by style, but no solution was provided on how styling should be applied. Two more things to take a note of:

This is not only about the last mark label, same applies to a starting label.
This also applies to the marks in the track as well, if you make them circular and big they get out of track bounds. I’d like to have an option to put them in bound of track. The still can be distributed evenly though.

To be clear, look at this input

And now look at the boundaries of the input

It’s clear that the last circle drops out of bound. I couldn’t find any examples of such design on net though.

Why this matters for me? It causes visual bugs of underlying labels(that are not part of input) to look weird, and also the labels that are marks inside input also sometimes look weird. It doesn’t match up nicely with our design system:

At least please provide a temporary solution for this, thanks.

MetaMmodern on Aug 8, 2023

Yes, sorry, I meant Slider.

I would assume the parent component should basically grow as the content

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.

abriginets on Apr 18, 2022

I assume you meant Slider, not Checkbox. 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.

mnajdova on Apr 18, 2022