Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Slider] marks texts are out of bounds when labels are too long

See original GitHub issue

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

Issue Analytics

State:
Created a year ago
Reactions:1
Comments:5 (5 by maintainers)

Top GitHub Comments

1reaction

abriginetscommented, Apr 18, 2022

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.

1reaction

mnajdovacommented, 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.

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 ...

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....

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.

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} ...

<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...