[Slider] Value label position if disabled
See original GitHub issueIf the Slider
is disabled
, the value label is slightly off to the right.
- The issue is present in the latest release.
- I have searched the issues of this repository and believe that this is not a duplicate.
Current Behavior 😯
The value label for a disabled Slider is positioned slightly to the right.
The problem is at this line: https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Slider/ValueLabel.js#L23 Removing the line fixed the problem, can you explain why it is needed?
Expected Behavior 🤔
The value label should be centered.
Steps to Reproduce 🕹
https://codesandbox.io/s/material-demo-edpse
Steps:
- Use
valueLabelDisplay="on"
to make the value label visible all the time - Use
disabled={true}
Context 🔦
I want to display the value of a disabled slider.
Your Environment 🌎
Tech | Version |
---|---|
Material-UI | v4.8.3 |
Issue Analytics
- State:
- Created 4 years ago
- Comments:5 (5 by maintainers)
Top Results From Across the Web
When Slider is disabled, the value label is slightly off to the ...
“When Slider is disabled, the value label is slightly off to the right in the React Material UI…” is published by Shama Ahlawat....
Read more >Material UI Slider - Place Labels Below Slider Track in React
I have a React project that I am required to create a Material UI Slider. But it is placing the mark labels above...
Read more >Slider API - Material UI - MUI
Accepts a function which returns a string value that provides a user-friendly name for the thumb labels of the slider. This is important...
Read more >Slider (JavaFX 8) - Oracle Help Center
The Slider can optionally show tick marks and labels indicating the different slider position values. The three fundamental variables of the slider are...
Read more >Slider | Angular Material
Whether the slider is disabled. @Input(). discrete: boolean. Whether the slider displays a numeric value label upon pressing the thumb. @Input().
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
That sounds good – would you mind if I try tackling that and submit a pull request to remove the IE 11 fix and add a test?
@davidfdriscoll Please do 😃